Angular 在循环中多次调用相同的 API

Question

我需要遍历对象数组并为每个对象调用 API。根据响应中的对象数量，我正在创建新对象并将其插入数组。下面是示例代码。例如，如果最初有 2 个提供者并且每个提供者各有 2 个位置，则 updatedProviderList 将有 4 个提供者。这工作正常。

问题是，updateProvidersInState 必须在所有 API 调用和与之相关的逻辑完成后才被调用。我已经尝试使用如下所示的索引，但它不起作用。仅在所有 API 调用完成后调用 updateProvidersInState 的任何方法？

let providers = []; //assume this is already populated
let updatedProvider;
let updatedProviderList;
providers.forEach((prv, index) => {
  this.dataService.getLocation(prv.id).subscribe((response: LocationResults) => {
    response.locations.forEach((location, i) => {
      updatedProvider = cloneDeep(prv);
      updatedProvider.location = location;
      updatedProviderList.push(updatedProvider);
      if (index === providers.length - 1 && i === response.length - 1) {
        this.updateProvidersInState(updatedProviderList);
      }
    });
  });
});

Answer 1

forkJoin() 函数允许您加入一个可观察对象列表，并在所有请求完成后继续。这样做的好处是请求将并行而不是顺序发出。

import { forkJoin } from 'rxjs';

let providers: Provider[] = []; // assume this is populated, i made up the type Provider.

forkJoin(
  providers.map(p =>
    this.dataService.getLocation(p.id).pipe(
      // map each Location to a cloned provider object
      map((response: Location[]) => response.map(location => {
        const updatedProvider = cloneDeep(p);
        updatedProvider.location = location;
        return updatedProvider;
      }))
    )
  )
).subscribe((p: Provider[][]) => {
  // flatten the multi-dimensional array
  const updatedProviders = [].concat(...p);

  this.updateProvidersInState(updatedProviders);
});