qrcode

马上订阅,开启修仙之旅

RxJS 处理多个Http请求

有时候进入某个页面时,我们需要从多个 API 获取数据然后进行页面显示。管理多个异步数据请求会比较困难,但我们可以借助 Angular Http 服务和 RxJS 库提供的功能来实现上述的功能。处理多个请求有多种方式,使用串行或并行的方式。

基础知识

mergeMap

mergeMap 操作符用于从内部的 Observable 对象中获取值,然后返回给父级流对象。

  • 合并 Observable 对象
1
2
3
4
5
6
import { of } from "rxjs";
import { mergeMap } from "rxjs/operators";

const source$ = of("Hello");
const example$ = source$.pipe(mergeMap(val => of(`${val} World!`)));
const subscribe = example$.subscribe(val => console.log(val));

在上面示例中包含两种 Observable 类型:

  • 源 Observable 对象 —— 即 source$ 对象。
  • 内部 Observable 对象 —— 即 of(${val} World!) 对象。

仅当内部的 Observable 对象发出值后,才会合并源 Observable 对象输出的值,并最终输出合并的值。

forkJoin

forkJoin 是 RxJS 版本的 Promise.all(),即表示等到所有的 Observable 对象都完成后,才一次性返回值。

  • 合并多个 Observable 对象
1
2
3
4
5
6
7
8
9
import { timer, forkJoin } from "rxjs";
import { mapTo } from "rxjs/operators";

const getPostOne$ = timer(1000).pipe(mapTo({ id: 1 }));
const getPostTwo$ = timer(2000).pipe(mapTo({ id: 2 }));

forkJoin(getPostOne$, getPostTwo$).subscribe(
res => console.log(res)
);

处理 Http 请求

我们先来看一下 Angular Http 服务简单示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
selector: 'my-app',
template: `
<p>HttpModule Demo</p>
`
})
export class AppComponent implements OnInit {
constructor(private http: HttpClient) { }

ngOnInit() {
this.http.get('https://jsonplaceholder.typicode.com/users')
.subscribe(users => console.log(users));
}
}

上面示例中,我们通过依赖注入方式注入 HttpClient 服务,然后在 ngOnInit() 方法中调用 http 对象的 get() 方法来获取数据。这个例子很简单,它只处理一个请求,接下来我们来看一下如何处理两个请求。

Map 和 Subscribe

有些时候,当我们发送下一个请求时,需要依赖于上一个请求的数据。即我们在需要在上一个请求的回调函数中获取相应数据,然后在发起另一个 HTTP 请求。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
selector: 'my-app',
template: `
<p>{{username}} Detail Info</p>
{{user | json}}
`
})
export class AppComponent implements OnInit {
constructor(private http: HttpClient) { }

apiUrl = 'https://jsonplaceholder.typicode.com/users';
username: string = '';
user: any;

ngOnInit() {
this.http.get(this.apiUrl)
.subscribe(users => {
let username = users[6].username;
this.http.get(`${this.apiUrl}?username=${username}`)
.subscribe(
user => {
this.username = username;
this.user = user;
});
});
}
}

在上面示例中,我们先从 https://jsonplaceholder.typicode.com/users 地址获取所有用户的信息,然后再根据指定用户的 username 进一步获取用户的详细信息。虽然功能实现了,但有没有更好的解决方案呢?答案是有的,可以通过 RxJS 库中提供的 mergeMap 操作符来简化上述的流程。

mergeMap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { mergeMap } from 'rxjs/operators';

@Component({
selector: 'my-app',
template: `
<p>{{username}} Detail Info</p>
{{user | json}}
`
})
export class AppComponent implements OnInit {
constructor(private http: HttpClient) { }

apiUrl = 'https://jsonplaceholder.typicode.com/users';
username: string = '';
user: any;

ngOnInit() {
this.http.get(this.apiUrl)
.pipe(mergeMap(users => {
let username = users[6].username;
return this.http.get(`${this.apiUrl}?username=${username}`)
})).subscribe(user => {
this.user = user
});
}
}

在上面示例中,我们通过 mergeMap 操作符,解决了嵌套订阅的问题。最后我们来看一下如何处理多个并行的 Http 请求。

forkJoin

接下来的示例,我们将使用 forkJoin 操作符。如果你熟悉 Promises 的话,该操作符与 Promise.all() 实现的功能类似。forkJoin 操作符接收一个 Observable 对象列表,然后并行地执行它们。一旦列表的 Observable 对象都发出值后,forkJoin 操作符返回的 Observable 对象会发出新的值,即包含所有 Observable 对象输出值的数组。具体示例如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { forkJoin } from "rxjs";

@Component({
selector: 'my-app',
template: `
<p>Post Detail Info</p>
<ul>
<li>{{post1 | json}}</li>
<li>{{post2 | json}}</li>
</ul>
`
})
export class AppComponent implements OnInit {
constructor(private http: HttpClient) { }

apiUrl = 'https://jsonplaceholder.typicode.com/posts';
post1: any;
post2: any;

ngOnInit() {
let post1$ = this.http.get(`${this.apiUrl}/1`);
let post2$ = this.http.get(`${this.apiUrl}/2`);

forkJoin([post1$, post2$])
.subscribe(results => {
this.post1 = results[0];
this.post2 = results[1];
});
}
}

感兴趣的同学可以查看 Stackblitz 完整示例。

参考资源


欢迎小伙伴们订阅前端修仙之路,及时阅读 Angular、RxJS、TypeScript 和 Node.js 最新文章。

qrcode