Observable销毁回调中执行Promise代码的等待实现问题

我完全懂你的困扰——当触发Observable的销毁回调（teardown）时，里面的异步操作（比如你那个5秒后才resolve的Promise）没法被等待，程序会直接往下走，根本不等异步代码执行完。其实从RxJS 7版本开始，框架已经原生支持处理这种场景了，咱们来调整代码解决这个问题：

首先，修改你的Observable定义，让teardown函数直接返回异步操作的Promise：

let observable = new Observable(subscriber => {
  setTimeout(() => subscriber.next('Hello World'), 3000);
  // 直接返回Promise，RxJS会自动等待它完成
  return () => {
    return new Promise(resolve => {
      setTimeout(() => {
        console.log("销毁回调的异步操作完成");
        resolve();
      }, 5000);
    });
  };
});

接下来，取消订阅的时候，subscription.unsubscribe()会变成一个异步方法，你可以用async/await或者.then()来等待它完成：

async function runDemo() {
  let subscription = observable.subscribe(next => console.log(next));
  
  // 模拟一段时间后触发取消订阅
  setTimeout(async () => {
    console.log("开始执行取消订阅");
    // 等待销毁回调里的Promise执行完毕
    await subscription.unsubscribe();
    console.log("订阅已完全取消，所有销毁操作都完成了");
  }, 4000);
}

runDemo();

核心要点说明： #

• 必须确保使用RxJS 7及以上版本，更早的版本不支持teardown返回Promise的等待逻辑。
• 当teardown返回Promise时，unsubscribe()不再是同步方法，一定要通过await或者Promise链式调用等待它，否则代码会跳过异步操作直接执行后续逻辑。
• 如果销毁回调里有多个异步任务，可以用Promise.all()把它们合并成一个Promise后返回，RxJS会等待所有任务完成。

要是你暂时没法升级RxJS版本，也可以自己封装一个带异步销毁支持的订阅管理器：

class AsyncSubscription {
  constructor(baseSubscription, teardownPromise) {
    this.baseSubscription = baseSubscription;
    this.teardownPromise = teardownPromise;
  }

  async unsubscribe() {
    this.baseSubscription.unsubscribe();
    await this.teardownPromise;
  }
}

// 使用示例
let observable = new Observable(subscriber => {
  setTimeout(() => subscriber.next('Hello World'), 3000);
  const teardownPromise = new Promise(resolve => {
    setTimeout(() => {
      console.log("销毁回调的异步操作完成");
      resolve();
    }, 5000);
  });
  // 添加一个空的同步销毁回调占位
  subscriber.add(() => {});
  return new AsyncSubscription(subscriber, teardownPromise);
});

不过这种自定义方案肯定不如RxJS原生支持来得简洁可靠，优先推荐升级到支持该特性的版本哦。

内容的提问来源于stack exchange，提问作者Elie Faës