我在网上寻找解决方案，但没有找到适合我的用户情况的。我正在使用MEAN堆栈（Angular 6），并且有一个注册表单。我需要一种方法来执行多个HTTP调用API，并且每个调用取决于前一个返回的结果。我需要类似于这样的东西：
firstPOSTCallToAPI('url', data).pipe(
result1 => secondPOSTCallToAPI('url', result1)
result2 => thirdPOSTCallToAPI('url', result2)
result3 => fourthPOSTCallToAPI('url', result3)
....
).subscribe(
success => { /* display success msg */ },
errorData => { /* display error msg */ }
);
我需要使用哪些RxJS操作符来实现这个功能？一种可能的解决方案是嵌套多个订阅，但我想避免这样做，而是更好地使用RxJS。同时还需要考虑错误处理。
对于依赖于前一个结果的调用，您应该使用concatMap
firstPOSTCallToAPI('url', data).pipe(
concatMap(result1 => secondPOSTCallToAPI('url', result1))
concatMap( result2 => thirdPOSTCallToAPI('url', result2))
concatMap(result3 => fourthPOSTCallToAPI('url', result3))
....
).subscribe(
success => { /* display success msg */ },
errorData => { /* display error msg */ }
);
如果您的异步方法不依赖于前置异步调用的返回值，您可以使用
concat(method(),method2(),method3()).subscribe(console.log)
map 将下游传递：
concatMap(result1 => secondPOSTCallToAPI('url', result1).pipe(map(result2=>[result1,result2]) - Fan Cheung我曾经遇到同样的问题，这是我的解决方案：使用pipe和concatMap来获取开始时间和结束时间之间的时间段内的序列数据。
对于我们有请求数组的一般情况，这是一个通用的解决方案。
我分享给关注此问题的任何人。
let currentReplayData = [];
let timerange = [[t1, t2], [t3, t4]]; // array of start and end time
from(timerange).pipe(
concatMap(time => <Observable<any>>this.dataService.getData(time[0],time[1]))
).subscribe(val => {
//console.log(val)
this.currentReplayData = this.currentReplayData.concat(val);
});
MergeMapis exact what you are looking for
firstPOSTCallToAPI('url', data).pipe(
mergeMap(result1 => secondPOSTCallToAPI('url', result1)),
mergeMap(result2 => thirdPOSTCallToAPI('url', result2)),
mergeMap(result3 => fourthPOSTCallToAPI('url', result3)),
// ...
).subscribe(
success => {
// here you will get response of LAST request (fourthPOSTCallToAPI)
},
errorData => { /* display error msg */ }
);
// I assume that
// secondPOSTCallToAPI, thirdPOSTCallToAPI and fourthPOSTCallToAPI
// returns obserwable eg. return this.http.get<Book>(apiUrl);让我向您展示如何在编程中实现这一点，假设我有很多电子邮件要按顺序发送：
sendEmails() {
this.isLoading = true;
const calls = this.emails <<-- assume this contain an array of emails
.map(email => this.userEmailService.deliver({email: email, userId: 1242}));
from(calls) <<-- make use of the from.
.pipe(
concatMap(res => res),
finalize(() => this.isLoading = false)
).subscribe(() => { });
}
希望这对你有所帮助。
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/forkJoin';
@Injectable()
export class DataService {
constructor(private http: HttpClient) { }
public requestDataFromMultipleSources(): Observable<any[]> {
let response1 = this.http.get(requestUrl1);
let response2 = this.http.get(requestUrl2);
let response3 = this.http.get(requestUrl3);
return Observable.forkJoin([response1, response2, response3]);
}
}
The above example shows making three http calls, but in a similar way you can request as many http calls as required
import { Component, OnInit } from '@angular/core';
import { DataService } from "../data.service";
@Component({
selector: 'app-page',
templateUrl: './page.component.html',
styleUrls: ['./page.component.css']
})
export class DemoComponent implements OnInit {
public responseData1: any;
public responseData2: any;
public responseData3: any;
constructor(private dataService: DataService) {}
ngOnInit() {
this.dataService.requestDataFromMultipleSources().subscribe(responseList => {
this.responseData1 = responseList[0];
this.responseData2 = responseList[1];
this.responseData3 = responseList[1];
});
}
}
forkJoin 会一次性发送所有内容，使用 concat 可以确保前一个完整执行后再发送下一个。 - mchl18