Angular 12中如何使用ConcatMap实现两个API接口串行调用

原来的实现依赖固定300ms延迟保证请求顺序，可靠性低，使用RxJS的concatMap可以严格保证第一个请求完成后再发起第二个请求，同时避免嵌套订阅问题，修改后的代码如下：

首先导入concatMap操作符（RxJS 6+版本写法）：

import { concatMap } from 'rxjs/operators';

修改后的getHIndices方法：

getHIndices(code) {
  this.api.getInstrumentHistoryIndices(code, '3M')
    .pipe(
      // 第一个请求返回后先处理3M周期数据，再映射到第二个5Y周期的请求
      concatMap((response3M: {}) => {
        this.prepareDataForHistory(response3M);
        return this.api.getInstrumentHistoryIndices(code, '5Y');
      })
    )
    .subscribe((response5Y: {}) => {
      // 第二个请求返回后处理5Y周期数据
      this.prepareDataForHistory2(response5Y);
    });
}

逻辑说明 #

• concatMap会等待上游的3M周期请求完全结束后，才会发起内部的5Y周期请求，严格保证两个请求的执行顺序
• 全程只有一次订阅，消除了原代码嵌套订阅的问题
• 无需依赖固定时长的setTimeout，避免了第一个请求响应超时导致数据处理顺序错乱的隐患

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