angular - 在 Angular 中运行函数之前等待多个 http 请求完成

Question

我有多个从 MySQL 数据库获取 JSON 数据的 http 帖子。我想要一个函数来监听所有这些，并在所有返回数据已收到后运行下一段代码。

我尝试了 async 和 await 的多种变体，但该函数似乎没有等待 HTTP post 完成。

我有一个风险服务risk.service.ts来获取riskTable例如:

getRiskTable(): Observable<Risk[]> {
    return this.http.get(`${this.baseUrl}/getRiskTable`).pipe(
      map((res) => {
        this.riskTable = res['data'];
        return this.riskTable;
      }),
      catchError(this.handleError));
  }

在我的仪表板上我调用此代码:

getRiskTable():any {
    return this.riskService.getRiskTable().subscribe(
      (res: []) => {
        this.riskTable = res; // the value is correctly captured here
        return true;
      },
      (err) => {
        this.error = err;
      }
    );
  }

然后是一个运行多个这些函数的异步函数，理论上它应该等到所有函数完成然后记录该值。但由于某种原因，全局变量 this.riskTable 在此函数中未定义。

async getAllData(){
    let riskTable = await this.getRiskTable();
    let risks = await this.getAllRisks();

    console.log(riskTable); //This returns stuff
    console.log(risks);
    console.log(this.riskTable); //This returns undefined even though it was set in getRiskTable
  }

请指点一下 - 我对 Angular 很陌生，它的复杂性让我完全难住了。 2 天和 100 倍的变化才能让它发挥作用，我正在慢慢失去我的香蕉!

Answer 1

首先，async/await 关键字用于 Promise，而不是用于 Observable。因此，您可以使用 toPromise() 将 observable 转换为 Promise，也可以使用 rxjs ForkJoin 。您还需要更改方法以返回可观察值或返回 promise ，您不能对 Subscription 做太多事情，这是调用它时 subscribe 返回的内容，这就是您现在传递的内容getRiskTable。

另一个问题是您没有利用类型系统，不要在任何地方使用any，因为这些错误可能在转译时被捕获，现在您必须猜测为什么它失败了运行时间比较困难。

import { forkJoin } from 'rxjs';
import { shareReplay } from 'rxjs/operators';

getRiskTable() : Observable<Risk[]> {
  const tableObservable = this.riskService.getRiskTable().pipe(shareReplay());
  tableObservable.subscribe((res) => this.riskTable = res, (err) => {this.error = err;});
  return tableObservable;
}

getAllData() {
  let riskTable = this.getRiskTable();
  let risks = this.getAllRisks(); // should also return some observable

  forkJoin(riskTable, risks).subscribe(_ => {
    // all observables have been completed
  });
}

请注意，我还添加了 shareReplay这确保了对同一可观察对象的多次订阅不会导致对 API 端点的多次调用。一个结果在可观察对象的多个订阅之间共享。