Angular - 从承诺中获取价值答案

【问题标题】：Angular - getting the values out of a promiseAngular - 从承诺中获取价值
【发布时间】：2021-01-07 04:02:34
【问题描述】：

我有一个 getClients 方法，它是对 web 服务的调用，它返回一个 Json 答案，其中一个字段是“响应”（将所有客户端返回为接口 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;
  }`

=> 返回承诺；

另一个组件：接收结果，这里我希望它是接口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方法中取回我需要的数据（接口Data）

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

【问题讨论】：

这个问题已经回答过好几次了。来自 Promise（和 Observable）的数据是异步的。它不能像您尝试的那样同步返回。请完整阅读this 帖子以了解什么是异步数据以及如何使用它。
附带说明 RxJS toPromise() 函数在 RxJS 7 中已被弃用，并将在 RxJS 8 中消失。有关更多信息，请参阅 here。
这能回答你的问题吗？ How do I return the response from an asynchronous call?
感谢您的帮助，我在发布之前阅读了很多stackoverflow的帖子。所以最好像我一样用订阅等返回 Observable 吗？ :O

标签： angular http promise get

【解决方案1】：

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

解决方案在这里： （对于与我搜索相同数小时的其他人！）

我有一个 getClients 方法，它是对 web 服务的调用，它返回一个 Json 答案，其中一个字段是“响应”（将所有客户端返回为接口 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);
  }

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

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

罗尼

【讨论】：