Angular 7 - 如何进行后续的 http 请求答案

【问题标题】：Angular 7 - How to make consequent http requestsAngular 7 - 如何进行后续的 http 请求
【发布时间】：2020-01-12 10:12:40
【问题描述】：

我阅读了很多关于这个主题的主题，但我还没有理解如何使它成为热门。

我需要向我们的 API 发出一个 http 请求，得到结果，我需要设置一些在 html 中使用的变量。完成所有这些操作后，我需要进行第二次 http 请求并执行相同的操作（设置 html 中使用的变量），然后进行第三次 http 请求，依此类推。

我读到 concatMap 对此很有用，但不清楚如何编写正确的代码以获得第一个代码的结果并做一些事情，最后，做第二个调用，依此类推...

感谢您的帮助

【问题讨论】：

您至少尝试过使用它吗？如果没有，那就试试吧。如果是，你尝试了什么（发布代码），你遇到了什么困难（给出解释）？

标签： angular httprequest

【解决方案1】：

你可以使用mergeMap，这是一个例子：

   this.http.get('/api/people/1').pipe(
      mergeMap(character => this.http.get(character.homeworld))
    );

【讨论】：

【解决方案2】：

这些 API 是否依赖？我的意思是您是否使用第一个 API 的输出来进行第二个 API 调用？

如果否，您可以使用forkJoin并行API调用

如果是且API超过两个，我建议使用toPromise()然后使用await调用

const firstAPIOutput = await http.get('/api/person/1').toPromise();
//do some stuff with firstAPIOutput
const secondAPIOutput = await http.get('/api/person/2').toPromise();
//do some stuff with secondAPIOutput
//and so on

【讨论】：

Ashish，不转换为 Promise，使用 switchMap Rxjs（好吧，你可以使用 mergeMap，查看差异检查，例如这个链接：netbasal.com/…）。这是更“自然的方式”
我知道我们不应该将 rxjs 与这样的 Promise 混为一谈。但首先此类请求应在后端处理。其次，使用 switchMap 或 mergeMap 发出 5 6 个连续请求的代码将非常难以阅读和维护。

【解决方案3】：

我想我需要更好地解释我需要什么。我想用 http 请求的结果填充网页。此请求生成一个 json，我在组件中使用它来填充 html 中的一些变量。 Json 非常大，所以我决定进行 2 个 http 调用。第一个生成带有主要数据的json（我的意思是网页“首屏”中的每个数据），第二个调用生成一个带有辅助内容的json（（我的意思是每个不在“上方”中的数据）网页的折叠”））。现在我这样做：我首先调用 (this.http.get('url1').subscribe(...). 结果我填充了一些变量，然后我调用了 (this.http.get( 'url2').subscribe(...). 在第二次调用的结果中，我填充了一些其他变量。结果是我的页面首先在“首屏”部分显示数据，然后在其他部分显示数据。我读到在另一个订阅中进行订阅不是正确的方法。我认为 concatMap 是为了完成 htt 请求。但真正的问题是获取每个调用的结果并在执行以下调用之前使用它。

【讨论】：