TypeScript环境下链式调用HTTP请求返回Observable嵌套问题求助

问题原因 #

你代码中嵌套Observable的问题来自map操作符的特性：map只会对Observable发射的普通值做映射转换，当映射函数返回的是另一个Observable时，map不会自动拆解这个内部Observable，只会把它当做普通值发射，因此会出现Observable<Observable<number>>的嵌套结构。

解决方案 #

将问题行的map替换为RxJS提供的高阶映射操作符即可，这类操作符会自动将内部Observable的结果发射到外层，直接得到单层的Observable<number>，无需修改原有函数签名，也不需要转Promise处理。

你可以根据业务场景选择合适的高阶映射操作符：

• 普通无特殊要求的场景选mergeMap（别名flatMap）：会同时订阅所有内部Observable，并行处理返回结果
• 后续请求触发时要取消前一次未完成的内部请求选switchMap：适合搜索联想这类重复请求需要丢弃旧结果的场景
• 需要严格按请求发起顺序返回结果选concatMap：会等待前一个内部Observable完成后再订阅下一个

修改后的完整代码 #

import { of, Observable } from 'rxjs';
import { mergeMap } from 'rxjs/operators'; // 引入需要的高阶操作符

b(data: number): Observable<number> { return of(data); }  // 模拟接口请求桩代码
a(data: number): Observable<number> {

  const fn = (x): Observable<number> => {
    return of(x)  // 模拟HTTP请求返回的Observable桩代码
  }

  if(data < 3) {
    return fn(data);
  } else {
    // 将map替换为mergeMap即可
    return b(data).pipe(mergeMap( x => fn(x) ))
  }
}

内容的提问来源于stack exchange，提问作者Fallenreaper