动手实现Promise，解锁异步编程的秘诀

前端

2023-06-05 02:14:01

Promise：解锁异步编程的神奇力量

什么是Promise？

想像一下一个占位符，它代表着一项尚未完成的任务。这就是Promise！它是一种异步编程工具，允许您在任务完成后指定后续操作。它就像一个信使，在后台辛勤工作，并在准备好时向您报告结果。

Promise的状态

Promise有三种状态：

Pending： 任务正在进行中，等待结果。
Fulfilled： 任务成功完成，您可以访问结果。
Rejected： 任务失败，您可以获取错误信息。

实现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 (error) {
      reject(error);
    }
  }

  then(onFulfilled, onRejected) {
    if (this.state === 'pending') {
      this.onFulfilledCallbacks.push(onFulfilled);
      this.onRejectedCallbacks.push(onRejected);
    } else if (this.state === 'fulfilled') {
      onFulfilled(this.value);
    } else if (this.state === 'rejected') {
      onRejected(this.reason);
    }

    return this;
  }
}

Promise的用法

假设您要执行一个异步任务，例如Ajax请求。您可以使用Promise来处理这个任务：

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('成功！');
  }, 1000);
});

promise.then((value) => {
  console.log(value); // 输出：成功！
});