拆解Promise，面试官再也无法拦住我

2024-01-12 18:23:30

1. 定义整体结构

Promise是一个构造函数，它接收一个执行器函数作为参数。执行器函数有两个参数，分别是resolve和reject。resolve用于在异步操作成功时调用，reject用于在异步操作失败时调用。

2. 实现Promise构造函数

Promise构造函数的代码如下：

function Promise(executor) {
  this.state = 'pending'; // 初始状态
  this.value = undefined; // 成功的值
  this.reason = undefined; // 失败的原因
  this.onFulfilledCallbacks = []; // 成功的回调函数队列
  this.onRejectedCallbacks = []; // 失败的回调函数队列

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

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

  executor(resolve, reject);
}

3. 实现then方法

Promise原型对象上的then方法用于添加回调函数，以便在Promise状态改变时执行相应的操作。then方法的代码如下：

Promise.prototype.then = function(onFulfilled, onRejected) {
  return new Promise((resolve, reject) => {
    if (this.state === 'fulfilled') {
      onFulfilled(this.value);
      resolve(this.value);
    } else if (this.state === 'rejected') {
      onRejected(this.reason);
      reject(this.reason);
    } else {
      this.onFulfilledCallbacks.push(onFulfilled);
      this.onRejectedCallbacks.push(onRejected);
    }
  });
};

4. 实现Promise.resolve

Promise.resolve方法用于创建一个新的Promise对象，并立即将其状态置为成功。Promise.resolve方法的代码如下：

Promise.resolve = function(value) {
  return new Promise((resolve, reject) => {
    resolve(value);
  });
};

5. 实现Promise.reject

Promise.reject方法用于创建一个新的Promise对象，并立即将其状态置为失败。Promise.reject方法的代码如下：

Promise.reject = function(reason) {
  return new Promise((resolve, reject) => {
    reject(reason);
  });
};

6. Promise的使用示例

下面是一个Promise的使用示例：

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

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