forkJoin
forkJoin 是 RxJS 版本的 Promise.all()
,即表示等到所有的 Observable 对象都完成后,才一次性返回值。
- 合并多个 Observable 对象
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 请求。
-
常规做法
-
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; }); }); } }
mergeMap
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
});
}
}
forkJoin
接下来的示例,我们将使用 forkJoin
操作符。如果你熟悉 Promises 的话,该操作符与 Promise.all()
实现的功能类似。forkJoin
操作符接收一个 Observable 对象列表,然后并行地执行它们。一旦列表的 Observable 对象都发出值后,forkJoin
操作符返回的 Observable 对象会发出新的值,即包含所有 Observable 对象输出值的数组。具体示例如下:
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];
});
}
}
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, forkJoin } from 'rxjs';
@Component({
selector: 'app-root',
templateUrl: 'app/app.component.html'
})
export class AppComponent {
loadedCharacter: {};
constructor(private http: HttpClient) {}
ngOnInit() {
let character = this.http.get('https://swapi.co/api/people/1');
let characterHomeworld = this.http.get('http://swapi.co/api/planets/1');
forkJoin([character, characterHomeworld]).subscribe(results => {
// results[0] is our character
// results[1] is our character homeworld
results[0].homeworld = results[1];
this.loadedCharacter = results[0];
});
}
}