在 angular 6 中多次 Api 调用序列

Question

我有 20 APIs。我的目标是创建一个页面。当页面加载时，我希望调用所有 APIs 并加载数据并将其存储在许多数组类型变量中。但是，如果我在初始化时调用所有 APIs，加载页面会花费太多时间。所以现在我想在页面初始化时自动一个接一个地调用 APIs。你能给我一些想法如何让这些 API 一个接一个地调用吗？如果我在每个 API 的末尾使用 if 子句，即 if(respose) 承诺代码似乎太长。

Answer 1

为什么不调用 api 或在您真正需要它们之前调用它们，例如在加载路由之前使用解析器通过 api 调用获取数据。但是，如果您确实在一开始就需要它们，那么您可能需要优化，或者调用 1 api 来获取所有数据。而不是 20.

使用 Ng5 示例的解析器：https://www.concretepage.com/angular-2/angular-resolve-guard-example

搜索解决：https://angular.io/guide/router

Answer 2

由于您没有任何代码可以向我们展示，我做了一些 stackblitz 来向您展示如何使用 mergeMap 或 forkJoin 使用 return Observable 并使用 mergeMap、forkJoin 或 concatMap 使用 ID 数组动态调用函数。

看，mergeMap 会执行你的代码并独立跟踪它们，所以你的函数 return 的顺序不一定相同。 concatMap 尊重这一点并尝试按顺序执行它们。 forkJoin 将耐心等待，直到所有这些都完成，然后 return 你可以订阅 Observable 并获得 [= 的所有 return 值的数组12=] 你的函数 returned.

最好看一下代码并单击一次或两次。 Here is the stackblitz.

你可能也想看看 concatAll，你可以制作一个包含内部 Observable 的 Observable，并使用 concatAll 在前一个 Observable 完成后按顺序自动订阅下一个 Observable，here the link to learnrxjs.io，对于初学者来说是一个很好的资源。

希望这对您有所帮助。

Answer 3

我确实解决了我自己的问题。

of(...urls).pipe(
  concatMap((url: string) => this.getHTTP.getData(url)))
  .subscribe((result) => {
    this.resultArray.push(result);
    console.log('this.resultArray', this.resultArray);

函数 concatMap() 允许 url 一个接一个地命中。为了更好地理解，我发布了网络中 API 调用的瀑布截图。

在 angular 6 中多次 Api 调用序列

Multiple Api calling serialy in angular 6

angular-http

angular