解秘Promise与自定义封装Promise

前端

2024-01-27 20:56:22

Promise与自定义封装Promise

在JavaScript中，Promise是一种处理异步操作的有效工具。它允许您以同步的方式编写异步代码，从而简化了代码的结构和可读性。

1. Promise的基本原理

Promise是一个对象，它代表着一个异步操作的最终结果。Promise可以处于三种状态：

进行中 （pending）：表示异步操作正在进行中。
成功（resolved）：表示异步操作已成功完成，并返回了一个值。
失败（rejected）：表示异步操作已失败，并返回了一个错误。

Promise的状态只能改变一次，并且只能从进行中状态变成成功或失败状态。一旦Promise的状态改变，它就无法再改变。

2. 使用Promise

要使用Promise，您需要先创建一个Promise对象。您可以使用Promise构造函数来创建一个Promise对象。Promise构造函数接受一个函数作为参数，该函数称为执行器函数（executor）。执行器函数的两个参数分别是resolve和reject，它们用于改变Promise的状态。

以下是如何使用Promise的一个示例：

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

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

在上面的示例中，我们使用setTimeout函数来模拟一个异步操作。当setTimeout函数执行完毕后，它将调用resolve函数，并将'成功！'作为参数传递给resolve函数。这将导致Promise的状态从进行中变成成功，并触发then回调函数。then回调函数接受一个参数，该参数是Promise返回的值。

3. 自定义封装Promise

您还可以自定义封装Promise。自定义封装Promise可以使您更方便地使用Promise，并且可以根据自己的需要来定制Promise的行为。

以下是如何自定义封装Promise的一个示例：

function createPromise(executor) {
  let state = 'pending';
  let result;

  const promise = {
    then: (onFulfilled, onRejected) => {
      if (state === 'resolved') {
        onFulfilled(result);
      } else if (state === 'rejected') {
        onRejected(result);
      } else {
        // 等待Promise的状态改变后，再执行then回调函数
        const onFulfilledWrapper = (value) => {
          setTimeout(() => {
            onFulfilled(value);
          }, 0);
        };

        const onRejectedWrapper = (error) => {
          setTimeout(() => {
            onRejected(error);
          }, 0);
        };

        callbacks.push({ onFulfilled: onFulfilledWrapper, onRejected: onRejectedWrapper });
      }
    },
  };

  executor(
    (value) => {
      state = 'resolved';
      result = value;

      // 调用所有then回调函数
      callbacks.forEach((callback) => {
        callback.onFulfilled(result);
      });
    },
    (error) => {
      state = 'rejected';
      result = error;

      // 调用所有then回调函数
      callbacks.forEach((callback) => {
        callback.onRejected(result);
      });
    }
  );

  return promise;
}