在循环中对同一 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);
});