javascript - 在 Angular 6 中一一处理 http 响应

Question

实际上我有 15 个发送到 API 的 http 请求。 我想要做的就是一个接一个地处理响应，而不用等待所有请求结束(我有一个请求可能需要几分钟才能发送结果)。

服务端:

    findOneByOne(): Observable<any> {
    const calls = this.getCardsPath().map(el => this.getPromises(el));
    return Observable.forkJoin(calls)
        .map(res => {
            const tab = [];
            for (let i = 0; i < res.length; i++) {
                tab.push(this.checkInfoService(res[i].json()));
            }
            return tab;
        });
}


getPromises(str: String): Promise<any> {
    return this.requester.obtain({
        restUrl: "/administration/" + str,
        method: RequestMethod.Get
    })
        .toPromise()
        .then(res => res)
        .catch(err => err);
}

组件端:

    displayDashboardInfoService() {
    if (this.featuresFlag.getCurrentVersion() !== "1.08" && this.featuresFlag.getCurrentVersion() !== "-1") {
        this.busy = this.dashboardInfoService.findAll()
            .then((res: DashboardInfo[]) => this.findPaths(res))
            .then((res: DashboardInfo[]) => this.loadItems(res))
            .catch((err: any) => {
                if (environment.debugLevel >= 3) console.error(err);
            });
    }
    else {

        this.dashboardInfoService.findOneByOne()
            .subscribe((res) => {
                const tab = [];
                for (let i = 0; i < res.length; i++) {
                    tab.push(res[i][0]);
                }
                this.findPaths(tab);
                this.loadItems(tab);
            });
    }

}

谢谢:)

Answer 1

一个解决方案是将 forkJoin 更改为 merge 这样，当所有请求完成时，您不会获得一个事件，而是在每个请求完成后获得一个事件.

如果你有这样的例子:

waitForAll() {
  this.values = [];
  this.loadAllAtOnce([100, 200, 300, 400, 3000])
    .subscribe(values => {
      this.values = values;
    });
}

loadAllAtOnce(values: number[]) {
  return forkJoin(
    values.map(x => of (x).pipe(delay(x)))
  ).pipe(
    tap(values => {
      console.log(values);

    })
  );
}

可以改写成这样:

asTheyCome() {
  this.values = [];
  this.loadAsSoonAsAvailable([100, 200, 300, 400, 3000])
    .subscribe(value => {
      this.values.push(value);
    });
}

loadAsSoonAsAvailable(values: number[]) {
  return merge(
    ...values.map(x => of (x).pipe(delay(x)))
  ).pipe(
    tap(value => console.log(value))
  );
}

您可以找到一个工作示例 here .