“解构”Promise：手把手教你手写Promise框架

在JavaScript的世界里，Promise是一个非常重要的工具，它能够处理异步操作，让程序员能够轻松地处理异步任务并获取结果。不过，很多程序员并不了解Promise的实现原理，这可能会导致他们在使用Promise时遇到一些问题。本文将带你从零开始，一步一步地手把手教你实现一个完整的Promise框架，让你能够深入理解Promise的内部机制。

首先，我们需要了解什么是Promise。Promise是一个表示异步操作结果的对象，它可以处于三种状态：pending（等待）、fulfilled（已完成）和rejected（已拒绝）。当异步操作完成时，Promise就会从pending状态变为fulfilled状态或rejected状态。

为了实现Promise，我们需要定义一个Promise构造函数。这个构造函数需要接受一个参数，这个参数是一个函数，这个函数叫做executor。executor函数有两个参数，分别是resolve和reject。resolve函数用于将Promise的状态从pending变为fulfilled，reject函数用于将Promise的状态从pending变为rejected。

接下来，我们需要实现then方法。then方法用于在Promise状态改变时执行相应的回调函数。then方法需要接受两个参数，这两个参数都是函数，第一个函数用于处理fulfilled状态，第二个函数用于处理rejected状态。

然后，我们需要实现resolve方法。resolve方法用于将Promise的状态从pending变为fulfilled。resolve方法需要接受一个参数，这个参数就是Promise的结果。

最后，我们需要实现reject方法。reject方法用于将Promise的状态从pending变为rejected。reject方法需要接受一个参数，这个参数就是Promise被拒绝的原因。

以上便是手写Promise框架的基本步骤，只要掌握这些步骤，你就可以轻松地实现自己的Promise框架了。下面是一些手写Promise框架的示例代码：

// Promise构造函数
function Promise(executor) {
  this.state = 'pending';
  this.result = undefined;
  this.onFulfilledCallbacks = [];
  this.onRejectedCallbacks = [];

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

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

  executor(resolve, reject);
}

// then方法
Promise.prototype.then = function (onFulfilled, onRejected) {
  return new Promise((resolve, reject) => {
    if (this.state === 'fulfilled') {
      setTimeout(() => {
        try {
          const result = onFulfilled(this.result);
          resolve(result);
        } catch (error) {
          reject(error);
        }
      }, 0);
    } else if (this.state === 'rejected') {
      setTimeout(() => {
        try {
          const result = onRejected(this.result);
          resolve(result);
        } catch (error) {
          reject(error);
        }
      }, 0);
    } else {
      this.onFulfilledCallbacks.push(() => {
        setTimeout(() => {
          try {
            const result = onFulfilled(this.result);
            resolve(result);
          } catch (error) {
            reject(error);
          }
        }, 0);
      });
      this.onRejectedCallbacks.push(() => {
        setTimeout(() => {
          try {
            const result = onRejected(this.result);
            resolve(result);
          } catch (error) {
            reject(error);
          }
        }, 0);
      });
    }
  });
};

// resolve方法
Promise.resolve = (value) => {
  return new Promise((resolve) => {
    resolve(value);
  });
};

// reject方法
Promise.reject = (reason) => {
  return new Promise((, reject) => {
    reject(reason);
  });
};

// all方法
Promise.all = (promises) => {
  return new Promise((resolve, reject) => {
    const results = [];
    let count = 0;

    promises.forEach((promise, index) => {
      promise.then((result) => {
        results[index] = result;
        count++;
        if (count === promises.length) {
          resolve(results);
        }
      }).catch((reason) => {
        reject(reason);
      });
    });
  });
};

// race方法
Promise.race = (promises) => {
  return new Promise((resolve, reject) => {
    promises.forEach((promise) => {
      promise.then((result) => {
        resolve(result);
      }).catch((reason) => {
        reject(reason);
      });
    });
  });
};

希望这篇教程能够帮助你理解Promise的实现原理，并能够帮助你实现自己的Promise框架。