Angular7 HttpClient处理多个请求
2021-02-03 14:15
标签：需要 效果 com arp 处理 data pos his 中断 后一个请求需要前一个请求的返回结果时，需要使用串联请求。 可以使用 多个请求，无所谓先后顺序，等到全部请求完成后执行一定的操作时，需要使用并联请求； 可以使用ForkJoin，和promise方法效果一样，好处是：可以减少嵌套，优化代码； Angular7 HttpClient处理多个请求 标签：需要 效果 com arp 处理 data pos his 中断 原文地址：https://www.cnblogs.com/xiaxianfei/p/13156857.html1. MergeMap - 串联请求
MergeMap实现， 优势是减少嵌套，优化代码；代码如下:
import {HttpClient} from ‘@angular/common/http‘;
import {mergeMap} from ‘rxjs‘;
@Component({
...
})
export class HttpComponent implements OnInit {
constructor(private http: HttpClient) { }
ngOnInit() {
// 串联请求, 前面请求会影响后面的请求，前面请求未请求到，后面请求中断；
const httpThis = this;
httpThis.http.get(‘/api/token‘).
pipe(
map(token => {
return token;
}),
mergeMap((tokenRes: any) => { // tokenRes接收的是token数据
return httpThis.http.get(`/api/user?token=${tokenRes}`)
.pipe((user) => {
return user;
});
}),
mergeMap((userRes: any) => { // userRes接收的是user数据
return httpThis.http.get(`api/data?user=${userRes}`)
.pipe((data) => {
return data;
});
}))
.subscribe((resp) => { // resp接收的是data数据
console.log(‘最终结果resp是最后一个mergeMap的data‘);
});
}
}
2. ForkJoin - 并联请求
代码如下:
import {HttpClient} from ‘@angular/common/http‘;
import {forkJoin} from ‘rxjs‘;
@Component({
...
})
export class HttpComponent implements OnInit {
constructor(private http: HttpClient) { }
ngOnInit() {
// 并联请求
const post1 = this.requestData1();
const post2 = this.requestData2();
forkJoin([post1, post2])
.subscribe((data: any) => {
const postResult1 = data[0]; // ‘/api/post1的返回结果‘
const postResult2 = data[1]; // ‘/api/post2的返回结果‘
});
}
// 并联请求1
requestData1() {
return this.http.get(‘/api/post1‘)
.pipe((data) => {
return data;
});
}
// 并联请求2
requestData2() {
return this.http.get(‘/api/post2‘)
.pipe((data) => {
return data;
});
}
}