理解简单易学的手写promise

前端

2023-11-29 00:52:26

好的，您要求的文章如下。

理解简单易学的手写promise

Promise是JavaScript中用于处理异步操作的常用工具。它可以让你在异步操作完成时得到通知，并对结果进行处理。手写promise是一种自己实现的promise，可以帮助你更好地理解promise的工作原理。

什么是手写promise

手写promise是一个类，它定义了两个方法：resolve和reject。当异步操作成功完成时，调用resolve方法；当异步操作失败时，调用reject方法。

怎么实现一个promise

要实现一个promise，你需要创建一个构造函数，并在这个构造函数中定义resolve和reject方法。如下所示：

function Promise(executor) {
  this.state = 'pending'; // Promise的初始状态是pending
  this.value = undefined; // Promise的值
  this.reason = undefined; // Promise的错误原因

  // resolve方法将Promise的状态从pending改为fulfilled，并将值传递给then方法
  this.resolve = function(value) {
    if (this.state === 'pending') {
      this.state = 'fulfilled';
      this.value = value;
      this.onFulfilledCallbacks.forEach(callback => callback(value));
    }
  };

  // reject方法将Promise的状态从pending改为rejected，并将错误原因传递给catch方法
  this.reject = function(reason) {
    if (this.state === 'pending') {
      this.state = 'rejected';
      this.reason = reason;
      this.onRejectedCallbacks.forEach(callback => callback(reason));
    }
  };

  // onFulfilledCallbacks存储then方法传入的成功回调函数
  this.onFulfilledCallbacks = [];

  // onRejectedCallbacks存储then方法传入的失败回调函数
  this.onRejectedCallbacks = [];

  // executor是立即执行的函数，它传入resolve和reject方法，以便在异步操作完成时调用它们
  try {
    executor(resolve, reject);
  } catch (error) {
    reject(error);
  }
}

Promise的状态

Promise有三种状态：

pending ：初始状态，表示异步操作尚未完成。
fulfilled ：成功状态，表示异步操作成功完成。
rejected ：失败状态，表示异步操作失败。

Promise的用法

你可以使用then方法来处理promise的结果。then方法接收两个参数：成功回调函数和失败回调函数。当promise的状态变为fulfilled时，成功回调函数将被调用；当promise的状态变为rejected时，失败回调函数将被调用。如下所示：

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

promise.then(
  (value) => {
    console.log(value); // 输出：成功了！
  },
  (reason) => {
    console.log(reason); // 不会被调用
  }
);