RxJS concat操作符未按顺序执行Observable的问题及通用解决方案

这个问题的核心坑点在于Promise的立即执行特性，以及对RxJS Observable惰性执行的理解偏差，我来帮你梳理清楚：

问题原因分析 #

你当前的代码里，nums.map执行时会立刻遍历数组，为每个元素创建对应的Promise和Observable。而Promise的特性是一旦创建就会立即执行——也就是说，三个setTimeout在map执行的瞬间就同时启动了，哪怕你用了concat来合并Observable，也只是在等待这些已经在运行的Promise的结果，自然会在2秒后一起输出所有值。

修正方案：用defer保证惰性执行 #

要实现真正的顺序执行，你需要让每个Observable只有在被订阅的时候才去创建并执行对应的异步操作，这时候defer操作符就派上用场了。它会延迟Observable的创建逻辑，直到有订阅者订阅它时才执行工厂函数生成Observable。

修正后的代码如下：

const nums = [1, 2, 3]
const obs$ = nums.map(num => {
  // 用defer包装异步逻辑，确保只有被订阅时才执行
  return rxjs.defer(() => {
    const promise = new Promise(resolve => setTimeout(() => resolve(num), 2000))
    return rxjs.from(promise)
  })
})
rxjs.concat(...obs$).subscribe(
  num => { console.log('next', num) },
  err => { console.error('error', err.message) },
  () => { console.log('complete') }
)

执行逻辑说明 #

1. 当concat开始订阅第一个Observable时，defer的工厂函数才会执行，创建第一个Promise并启动2秒的定时器；
2. 第一个Promise resolve后，concat收到next 1，然后订阅第二个Observable，此时才启动第二个2秒定时器；
3. 以此类推，每个异步操作都等待前一个完全完成后才开始执行，最终就能得到你预期的输出：
   • next 1（第2秒）
   • next 2（第4秒）
   • next 3（第6秒）
   • complete（第6秒）

额外说明（针对实际HTTP请求场景） #

如果你的实际场景是HTTP请求（比如用RxJS的ajax操作符），其实不需要额外用defer——因为ajax本身就是惰性的，只有当Observable被订阅时才会发起请求。但如果是你自己手动包装Promise的异步操作，就必须用defer来避免Promise提前执行的问题。

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