学习Promise基础及手写Promise教程

2023-11-25 20:47:57

在JavaScript中，Promise是一种用于处理异步操作的强大工具。它允许你将异步操作抽象成一个对象，并通过这个对象来处理异步操作的结果。在本文中，我们将详细介绍Promise的基础知识，并通过一步一步的手写Promise和then方法，帮助你深入理解Promise的工作原理和应用场景。通过本文，你将掌握Promise的基本概念、使用方法和底层原理，为你的JavaScript异步编程之旅打下坚实的基础。

Promise的概念

Promise是一个表示异步操作的最终完成或失败状态的对象。它可以处于三种状态之一：

Pending：表示操作正在进行中。
Fulfilled：表示操作已成功完成。
Rejected：表示操作已失败。

Promise的使用方法

你可以通过以下步骤使用Promise：

创建一个Promise对象。
在Promise对象中定义一个执行器函数。
在执行器函数中执行异步操作。
根据异步操作的结果，调用执行器函数中的resolve或reject方法。
使用then方法来处理Promise的结果。

Promise的底层原理

Promise的底层原理是基于事件循环。当创建一个Promise对象时，会创建一个事件队列，用来存储等待执行的回调函数。当Promise的状态改变时，会触发相应的事件，并将事件队列中的回调函数依次执行。

手写Promise

为了更深入地理解Promise的原理，我们现在将一步一步地手写Promise和then方法。

首先，创建一个Promise对象。

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

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

  const reject = (reason) => {
    if (this.state !== 'pending') {
      return;
    }
    this.state = 'rejected';
    this.reason = 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 value = onFulfilled(this.value);
          resolve(value);
        } catch (error) {
          reject(error);
        }
      });
    } else if (this.state === 'rejected') {
      setTimeout(() => {
        try {
          const reason = onRejected(this.reason);
          resolve(reason);
        } catch (error) {
          reject(error);
        }
      });
    } else {
      this.onFulfilledCallbacks.push((value) => {
        setTimeout(() => {
          try {
            const value = onFulfilled(value);
            resolve(value);
          } catch (error) {
            reject(error);
          }
        });
      });

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

最后，我们来测试一下手写的Promise和then方法。

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

promise.then((value) => {
  console.log(value); // 输出：成功
}).then((value) => {
  console.log(value); // 输出：undefined
}).catch((reason) => {
  console.log(reason); // 不会输出
});