使用RxJS switchMap处理顺序API请求时如何保留首个请求数据?
解决RxJS switchMap保留第一个请求数据的问题
你当前的代码有两个小问题:一是res.data应该写成res1.data(switchMap的参数是res1),二是你只返回了第二个请求的结果,所以自然拿不到res1的其他数据,但这不是switchMap本身的限制,调整写法就能实现需求。
下面给两种常用方案:
方案一:组合两个请求的结果返回
在switchMap内部,用map操作符把第一个请求的目标数据和第二个请求的结果组合成一个对象,这样在subscribe里就能同时拿到两者:
this.apiCall1().pipe( switchMap(res1 => this.apiCall2(res1.data).pipe( map(res2 => ({ targetData: res1.differentData, api2Result: res2 })) ) ) ).subscribe(combinedResult => { // 赋值变量 const myVariable = combinedResult.targetData; // 处理第二个请求的结果 console.log(combinedResult.api2Result); });
方案二:提前用tap保存数据
如果只是需要把res1.differentData存到变量里,不需要在subscribe里同时处理第一个请求的其他数据,可以用tap操作符在switchMap之前先保存:
// 声明变量 let myVariable; this.apiCall1().pipe( tap(res1 => { // 提前保存目标数据 myVariable = res1.differentData; }), switchMap(res1 => this.apiCall2(res1.data)) ).subscribe(res2 => { // 这里myVariable已经有值,同时可以处理第二个请求的结果 console.log(myVariable, res2); });
两种方案选哪种看你的实际需求:如果需要在订阅回调里同时操作两个请求的数据,选方案一;如果只是需要保存第一个请求的某个数据后续使用,方案二更简洁。
内容的提问来源于stack exchange,提问作者rbrtj
相关产品推荐
相关产品推荐

