Angular 2+：API 调用以填充 <select> 并设置选定值

Question

假设我有两个 REST API 端点，如下所示：

加载查找列表（例如位置）：host/api/locations
加载用户详细信息：host/api/user/1

我将在 HTML 表单上显示此信息，该表单具有加载位置列表的功能。加载用户详细信息时，默认选择值应设置为用户的家庭位置，这是用户详细信息的一部分。

我知道我可以通过链接来做到这一点，使用订阅方法或 using flatmap in RxJs。但它们实际上都是针对第二个 API 调用取决于第一个的响应的情况。在我的例子中，两个 API 调用之间没有依赖关系，唯一的问题是位置应该加载到用户的家庭位置中，以便将其设置为所选值。

最好的方法是什么？

Answer 1

这里，rxjs forkJoin 算子来帮你。当所有可观察对象的响应都到达时，它确保发出值。这是来自 rxjs 站点的描述

One common use case for this is if you wish to issue multiple requests on page load (or some other event) and only want to take action when a response has been received for all. (detailed link)

你的实现应该是这样的

      let req1$ = this.apiService.api1(); //first observable
      let req2$ = this.apiService.api2(); //second observable
      
      forkJoin(req1$, req2$).subscribe(([response1, response2])=>{
      //Your implementation shall go here.
      });

谢谢。

Answer 2

ForkJoin 将为您服务。

'forkJoin' 是最简单的方法，当你需要等待多个 HTTP 请求被解析时。

'forkJoin' 等待每个 HTTP 请求完成并将每个 HTTP 调用的所有可观察对象 return 分组到单个可观察数组中，最后 return那个可观察的数组。

const locations = this.http.get('host/api/locations');
const user = this.http.get('host/api/user/1');

forJoin(locations,user).subscribe(result => {
result[0]; // location
result[1]; // user
})

Angular 2+：API 调用以填充 <select> 并设置选定值

Angular 2+: API Calls to populate <select> and set selected value

api

chaining

flatmap

angular