如何将Promise<Observable<T>>折叠为Observable<T>并保证执行顺序？

你猜得真准！Observable.defer()确实是解决这个问题的绝佳方案，它能完美帮你把Promise的逻辑合并到Observable流里，同时严格保证doSomething()在getObservableFromSomewhereElse()之前执行。下面给你两种具体的实现方式，选你觉得顺手的就行：

方法一：使用defer + async/await（贴近原有代码逻辑） #

defer的特性是只有当Observable被订阅时，才会执行传入的工厂函数，这刚好能让我们把异步逻辑包裹进去，并且RxJS会自动处理工厂函数返回的Promise。最后用mergeAll（或类似操作符）把嵌套的Observable扁平化，就能直接返回Observable<T>了：

import { defer } from 'rxjs';
import { mergeAll } from 'rxjs/operators';

function foo(): Observable<T> {
  return defer(async () => {
    // 先等待doSomething完成
    await doSomething();
    // 再获取目标Observable
    return getObservableFromSomewhereElse();
  }).pipe(
    // 把Promise<Observable<T>>转换成Observable<T>
    mergeAll()
  );
}

关于操作符的选择：

• 如果getObservableFromSomewhereElse()返回的Observable只会emit一次就完成，mergeAll/concatAll/switchAll效果几乎一致；
• 如果需要控制并发或处理重复订阅，switchAll会取消之前的订阅，concatAll会按顺序执行，按需选择即可。

方法二：使用from + 链式操作符（RxJS风格） #

如果你更习惯RxJS的链式写法，也可以把doSomething()的Promise转换成Observable，再用concatMap来保证执行顺序：

import { from } from 'rxjs';
import { concatMap } from 'rxjs/operators';

function foo(): Observable<T> {
  // 把Promise转换成Observable
  return from(doSomething()).pipe(
    // 等待doSomething完成后，再调用并返回目标Observable
    concatMap(() => getObservableFromSomewhereElse())
  );
}

这个方案同样能确保doSomething()先执行，之后才会触发getObservableFromSomewhereElse()，最终返回的就是你想要的Observable<T>。

两种方法都能满足你的需求，前者更贴近你原来的async/await写法，后者更符合RxJS的流式编程思维，选哪个都没问题~

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