Angular处理多个异步请求

Angular处理多个异步请求

九月 26, 2018

背景：项目采用的app混合开发，h5开发采用的框架是Ionic3 + Angular5，在某些情况下会有多个异步请求同时发出，返回结果可能会产生关系依赖，暂且不说后台接口设计的问题，就从前端的角度出发，我们可以使用Angular为我们提供的一些库来解决上述问题。

最先想到的解决办法就是嵌套，这种弊端就在于代码让人难以阅读和维护，我们来看看Angular中是怎么处理的：

mergeMap

它可以将当前的Observable对象返回给父级流对象，然后进行数据交互操作：

1
2
3
4
5
this.http.get('url1').mergeMap(parent => {
       // 这是父级数据的返回，我们可以做一些操作
       return this.http.get(`url2?id=${parent}`);
   })
   .subscribe(result => console.log(result));

forkJoin

forkJoin会接受一组Observable对象，然后并行地处理它们，一旦所有的Observable对象都返回值，它会将所有的值以对应列表的形式返回：

1
2
3
4
5
6
7
const requestOne = this.http.get('url1');
const requestAnother = this.http.get('url2');
Observable.forkJoin([requestOne, requestAnother]).subscribe(results => {
    // 解构赋值
    const [one, another] = results;
    console.log(one, another);
});

forkJoin是一次性返回多个异步请求的结果，结果列表与请求列表是一一对应的。