Promise 自定义封装，赋能开发自由之翼

2023-10-25 13:03:36

前言

踏入前端开发的大门，你是否遇到过处理异步操作的难题？如何让你的代码在等待异步结果时，继续执行后续任务，而不必陷入死循环？这就是 Promise 登场的时候了！

基本原理

Promise 是 JavaScript 中一个强大的工具，它允许你在异步操作完成后执行一些列后续操作。想象一下，就像你在一家餐厅点餐，服务员会给你一个号码牌，让你在等待餐点的时候可以先去休息。当餐点准备好时，服务员会叫你的号码，让你去取餐。这个号码牌就相当于一个 Promise 对象，它代表着异步操作的结果。

当创建 Promise 对象时，你必须传入一个执行器函数。这个函数有两个参数，分别是 resolve 和 reject。resolve 表示异步操作成功完成，而 reject 表示异步操作失败。一旦异步操作完成，就会调用相应的函数，并把结果作为参数传递给它。

使用方法

使用 Promise 非常简单，只需要遵循以下步骤：

创建一个 Promise 对象。
在执行器函数中执行异步操作。
当异步操作完成后，调用 resolve 或 reject 函数，并把结果作为参数传递给它。
使用 then 方法来处理 Promise 的结果。

then 方法接受两个参数，分别是成功回调函数和失败回调函数。当 Promise 对象的状态变为已完成时，就会调用成功回调函数，并把结果作为参数传递给它。如果 Promise 对象的状态变为已拒绝，就会调用失败回调函数，并把原因作为参数传递给它。

自定义封装

虽然 JavaScript 内置了 Promise 对象，但有时候我们可能需要根据自己的需要对 Promise 进行自定义封装。这可以帮助我们更好地控制异步操作的流程，并使代码更加灵活高效。

自定义封装 Promise 的方法有很多，这里介绍一种简单的方法：

function Promise(executor) {
  this.state = 'pending';
  this.result = undefined;
  this.onFulfilledCallbacks = [];
  this.onRejectedCallbacks = [];

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

    this.state = 'fulfilled';
    this.result = value;
    this.onFulfilledCallbacks.forEach((callback) => {
      callback(value);
    });
  };

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

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

  executor(resolve, reject);
}

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

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