Angular

Question

我有一个 getClients 方法，它调用 Web 服务返回一个 Json 答案，其中一个字段是“response”（将所有客户端作为接口 Data[] 返回）

  getClients(): Observable<any> {
    // Get all clients from the database
    return this.http.get<any>(environment.apiURL + '/client/list' );
  }

我在另一个组件中有一个方法 getResults() :

  filterData: Data[];

  getResults(): Promise<Data[]> {
    const promise = new Promise<Data[]>((resolve, reject) => {
      this.restApiService.getClients()
        .toPromise()
        .then( clients => {
          clients.response.json as Data[];
        })
        .catch(this.handleError);
        ;
    });

    return promise;
  }`

=> return 承诺； <= 而不是在这里我想“return this.filterData;”仅使用我需要的数据作为接口 Data[]

另一个组件：接收结果，这里我希望它是接口 Data[]

  clients: Promise<Data[]>;

  constructor( private service: Service ) {
    this.clients = this.service.getResults();
    console.log('clientsssss : ' + this.clients);
  }

  ngOnInit() {
  }

接口数据 - 这是“响应”字段中的结构

export interface Data {
  clientName: string;
  clientId: number;
}

我没有成功从方法 getResults 获取我需要的数据（接口数据）

我首先尝试使用 Observable，但它是一个长列表并且没有给出任何结果（空），所以我读到它是异步的所以我需要使用“promise”。

Answer 1

我阅读了所有关于异步调用的建议页面.. 很多人会被所有这些信息淹没，甚至很难找到您需要的信息...

解决方案就在这里： （对于其他和我一样搜索了很多小时的人！）

我有一个 getClients 方法，它调用 Web 服务返回一个 Json 答案，其中一个字段是“response”（将所有客户端作为接口 Data[] 返回）

  getClients(): Observable<any> {
    // Get all clients from the database
    return this.http.get<any>(environment.apiURL + '/client/list' );
  }

我将我的方法 getResults() 修改为：

  filterData: Data[];

...

  async getResults(): Promise<Data[]> {
    const promise = await new Promise<Data[]>((resolve, reject) => {
      this.restApiService.getClients()
        .toPromise()
        .then(
          res => {
            // Success
            this.filterData = res.response;
            resolve();
          },
          msg => {
            // Error
            reject(msg);
          }
        )
        .catch(this.handleError);
    });
    console.log('ress : ' + JSON.stringify(this.filterData));
    return promise;
  }

  private loading: boolean = false;

  constructor( private service: Service ) {
    this.loading = true;
    const promise = this.service.getResults();
    this.loading = false;
    console.log('clientssss : ' + this.service.filterData);
  }

接口数据 - 这是字段“this.searchService.filterData”的结构（之后您可以在 html 组件中使用）

export interface Data {
  clientName: string;
  clientId: number;
}

罗尼

Angular - 从承诺中获取价值

Angular - getting the values out of a promise

get

http

promise