用 Typescript 手写 Promise，A+ 规范，随心所欲写代码

从头开始编写 Promise

为了从头开始编写 Promise，我们需要了解一些基本概念。首先，Promise 是一个对象，它表示一个异步操作的最终完成或失败。它有两个状态：已完成或已拒绝。其次，Promise 有一个 then() 方法，它允许我们指定在 Promise 完成或拒绝时要执行的回调函数。

实现 Promise

现在我们已经了解了 Promise 的基本概念，我们可以开始实现它。首先，我们需要创建一个 Promise 类：

class Promise {
  constructor(executor) {
    this.state = 'pending';
    this.value = undefined;
    this.reason = undefined;
    this.onFulfilledCallbacks = [];
    this.onRejectedCallbacks = [];

    const resolve = (value) => {
      if (this.state !== 'pending') return;
      this.state = 'fulfilled';
      this.value = value;
      this.onFulfilledCallbacks.forEach(callback => callback(value));
    };

    const reject = (reason) => {
      if (this.state !== 'pending') return;
      this.state = 'rejected';
      this.reason = reason;
      this.onRejectedCallbacks.forEach(callback => callback(reason));
    };

    try {
      executor(resolve, reject);
    } catch (err) {
      reject(err);
    }
  }

  then(onFulfilled, onRejected) {
    return new Promise((resolve, reject) => {
      if (this.state === 'fulfilled') {
        setTimeout(() => {
          try {
            const result = onFulfilled(this.value);
            resolve(result);
          } catch (err) {
            reject(err);
          }
        }, 0);
      } else if (this.state === 'rejected') {
        setTimeout(() => {
          try {
            const result = onRejected(this.reason);
            resolve(result);
          } catch (err) {
            reject(err);
          }
        }, 0);
      } else {
        this.onFulfilledCallbacks.push(() => {
          setTimeout(() => {
            try {
              const result = onFulfilled(this.value);
              resolve(result);
            } catch (err) {
              reject(err);
            }
          }, 0);
        });

        this.onRejectedCallbacks.push(() => {
          setTimeout(() => {
            try {
              const result = onRejected(this.reason);
              resolve(result);
            } catch (err) {
              reject(err);
            }
          }, 0);
        });
      }
    });
  }
}

使用 Promise

现在我们已经实现了 Promise，我们可以开始使用它了。我们可以像使用原生 Promise 一样使用它：

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Hello, world!');
  }, 2000);
});

promise.then(value => {
  console.log(value); // 输出: Hello, world!
});

使用 async 和 await

除了像使用原生 Promise 一样使用 Promise 之外，我们还可以使用 async 和 await 语法糖来使代码更简洁、更易读。async 和 await 是 TypeScript 中的两个，它们允许我们以同步的方式编写异步代码。

要使用 async 和 await，我们需要先创建一个 async 函数：

async function myFunction() {
  const value = await promise;
  console.log(value); // 输出: Hello, world!
}

在 async 函数中，我们可以使用 await 关键字来等待 Promise 完成。当 Promise 完成时，await 会返回 Promise 的结果。

结论

在本文中，我们从头开始实现了 Promise，并学习了如何使用它。我们还学习了如何使用 async 和 await 语法糖来使代码更简洁、更易读。希望本文对您有所帮助！