Angular 在循环中多次调用同一 API

Question

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

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

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);
});