【前端】Defer：存储Promise状态，多个异步事件都结束后处理一些逻辑

karshey2025-12-24 8:23

文章目录

- 前言
- 代码
- 使用

前言

看源码发现一段代码，遂学习。

代码

typescript 复制代码

export class Defer<T = unknown> {
  promise: Promise<T>;
  resolve!: (value: T) => void;
  reject!: (reason?: unknown) => void;

  constructor() {
    this.promise = new Promise<T>((resolve, reject) => {
      this.resolve = resolve;
      this.reject = reject;
    });
  }
}

使用

假如有多个异步事件，可以通过上述Defer控制。

假如，有一个关闭弹窗 的事件，我不知道它什么时候发生。我需要在此事件和其他异步事件都发生之后再处理一些事。

声明一个Defer：

typescript 复制代码

const popupCloseDefer = useRef(new Defer<boolean>());

关闭弹窗的事件发生了：

typescript 复制代码

popupCloseDefer.current.resolve(true);

几个异步事件都完成后再处理某逻辑：

typescript 复制代码

const initDefer = [
    playerDefer.current.promise,
    popupCloseDefer.current.promise,
];


Promise.all(initDefer).then(() => {
   // 多个异步事件都完成了要处理的逻辑
});