RxJS中连续map执行顺序异常，如何不改变调用顺序修正？

这事儿确实有点反直觉——按RxJS的正常逻辑，连续的map应该是先执行第一个map里的function1，拿到处理结果后再传给第二个map的function2，绝对不会出现function2先跑的情况。你遇到的这个问题，大概率是因为function1本身是异步操作（比如返回Promise、Observable，或者内部有未处理的异步逻辑），而你用了普通的map来处理它，导致第二个map直接拿到了异步对象（比如Promise）就开始执行，而不是等异步操作完成后的实际结果。

正常情况下的map执行顺序 #

先给你明确RxJS map的工作方式：当上游Observable（这里是this.service.retrieveObject(id)）发出一个值时，这个值会依次流经每个操作符：

1. 第一个map接收原始值，调用function1处理，返回处理后的结果
2. 第二个map接收第一个map的结果，调用function2处理，最终输出结果

所以正常顺序一定是function1先执行，function2后执行。

为什么会出现function2先执行？ #

如果function1是异步的（比如返回Promise），用普通map的话，它不会等待异步操作完成，而是直接把Promise对象传递给下一个map。这时候function2会立即接收这个Promise对象并执行，而function1的异步逻辑还在后台跑，看起来就像是function2先执行了。

举个直观的例子：

// 模拟异步的function1
const function1 = (obj) => {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log('function1执行完成');
      resolve({ ...obj, processed: true });
    }, 1000);
  });
};

const function2 = (obj) => {
  console.log('function2执行');
  return obj;
};

// 原来的代码
this.service.retrieveObject(id)
  .map(obj => function1(obj))
  .map(obj => function2(obj));

运行后会先打印function2执行，1秒后才打印function1执行完成——因为第二个map拿到的是Promise对象，直接执行了function2，而function1的异步逻辑还在等待。

不用调整map顺序的修改方案 #

核心是把第一个map换成能处理异步操作的操作符，比如mergeMap（或者switchMap、concatMap，根据你的业务需求选择），它会订阅function1返回的异步流，等异步操作完成拿到结果后，再传递给下一个map。

RxJS 5及以下版本修改代码：

this.service.retrieveObject(id)
  .mergeMap((object) => function1(object)) // 用mergeMap替代第一个map
  .map((resultFromFunction1) => function2(resultFromFunction1));

RxJS 6+版本（需使用pipe语法）：

import { map, mergeMap } from 'rxjs/operators';

this.service.retrieveObject(id).pipe(
  mergeMap(object => function1(object)),
  map(resultFromFunction1 => function2(resultFromFunction1))
);

操作符选择说明 #

• mergeMap：如果上游多次发值，会同时处理多个异步操作（适合不关心顺序、同时执行的场景）
• switchMap：如果上游发新值，会取消之前的异步操作（适合搜索框这类频繁请求的场景）
• concatMap：会按顺序排队处理异步操作，前一个完成再处理下一个（严格保证顺序的场景）

如果function1是同步的，但还是出现顺序问题，那你需要检查function1内部是不是藏了未处理的异步逻辑（比如setTimeout、AJAX请求），这时候要把function1改成返回Promise/Observable，让mergeMap能正确等待它完成。

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