Promise 实现原理详解

前言

在 JavaScript 的异步编程中，Promise 是一种非常常见的解决方案。Promise 可以让我们更方便地处理异步操作，让代码更加简洁和可读。本文将详细介绍 Promise 的实现原理，以及如何使用 Promise。

Promise 的基本概念

Promise 是一种对象，它代表了一个异步操作的最终完成或失败。Promise 可以有三种状态，分别是 pending（等待中）、fulfilled（已完成）和 rejected（已失败）。当 Promise 的状态变为 fulfilled 或 rejected 时，我们称其为 settled。

Promise 对象有一个 then 方法，用于注册当 Promise 被 settled 后的回调函数。then 方法接收两个参数，分别是当 Promise 被 fulfilled 时的回调函数和当 Promise 被 rejected 时的回调函数。then 方法返回一个新的 Promise 对象，它的状态和值由上一个 Promise 对象的状态和值决定。

Promise 的实现原理

Promise 的实现原理可以分为两个部分，分别是 Promise 的基本结构和 Promise 的状态转换。

Promise 的基本结构

Promise 的基本结构包括一个状态和一个值。状态有三种，分别是 pending、fulfilled 和 rejected。当 Promise 的状态为 pending 时，它的值可以是任何值。当 Promise 的状态为 fulfilled 时，它的值是一个成功的值。当 Promise 的状态为 rejected 时，它的值是一个失败的值。

// javascriptcn.com 代码示例
class MyPromise {
  constructor(executor) {
    this.status = 'pending';
    this.value = undefined;
    this.reason = undefined;

    const resolve = (value) => {
      if (this.status === 'pending') {
        this.status = 'fulfilled';
        this.value = value;
      }
    };

    const reject = (reason) => {
      if (this.status === 'pending') {
        this.status = 'rejected';
        this.reason = reason;
      }
    };

    try {
      executor(resolve, reject);
    } catch (error) {
      reject(error);
    }
  }
}

Promise 的状态转换

Promise 的状态转换有两种，分别是从 pending 转换到 fulfilled 和从 pending 转换到 rejected。当 Promise 被 settled 后，它的状态和值都不能再改变。

在 Promise 转换到 fulfilled 时，它的值会被保存下来。在 Promise 转换到 rejected 时，它的失败原因也会被保存下来。当 Promise 的状态被 settled 后，它的 then 方法会被执行。

// javascriptcn.com 代码示例
class MyPromise {
  constructor(executor) {
    this.status = 'pending';
    this.value = undefined;
    this.reason = undefined;
    this.onFulfilledCallbacks = [];
    this.onRejectedCallbacks = [];

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

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

    try {
      executor(resolve, reject);
    } catch (error) {
      reject(error);
    }
  }

  then(onFulfilled, onRejected) {
    const newPromise = new MyPromise((resolve, reject) => {
      if (this.status === 'fulfilled') {
        setTimeout(() => {
          try {
            const value = onFulfilled(this.value);
            resolve(value);
          } catch (error) {
            reject(error);
          }
        }, 0);
      } else if (this.status === 'rejected') {
        setTimeout(() => {
          try {
            const reason = onRejected(this.reason);
            reject(reason);
          } catch (error) {
            reject(error);
          }
        }, 0);
      } else {
        this.onFulfilledCallbacks.push((value) => {
          setTimeout(() => {
            try {
              const newValue = onFulfilled(value);
              resolve(newValue);
            } catch (error) {
              reject(error);
            }
          }, 0);
        });

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

    return newPromise;
  }
}

Promise 的使用

Promise 可以让我们更方便地处理异步操作。在 Promise 中，我们可以使用 then 方法来注册当 Promise 被 settled 后的回调函数。

// javascriptcn.com 代码示例
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Hello World');
  }, 1000);
});

promise.then((value) => {
  console.log(value);
});

在 then 方法中，我们可以返回一个新的 Promise 对象，这样就可以实现链式调用。

// javascriptcn.com 代码示例
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Hello');
  }, 1000);
});

promise
  .then((value) => {
    console.log(value);
    return 'World';
  })
  .then((value) => {
    console.log(value);
  });

总结

Promise 是一种非常常见的解决方案，它可以让我们更方便地处理异步操作。在 Promise 中，我们可以使用 then 方法来注册当 Promise 被 settled 后的回调函数。Promise 的实现原理可以分为 Promise 的基本结构和 Promise 的状态转换。当 Promise 被 settled 后，它的状态和值都不能再改变。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/655f65c4d2f5e1655d99b677