成为精简高效的程序员，掌握原生Promise的奥秘

2023-10-09 19:50:33

走近Promise的世界
Promise是一种JavaScript对象，用于表示异步操作的最终完成或失败及其结果值。它提供了统一的编程接口，使得开发人员可以更轻松地处理异步操作，提高代码的可读性和可维护性。

原生Promise的实现之旅

定义构造函数Promise
原生Promise可以通过定义一个构造函数Promise来实现。构造函数接受一个函数作为参数，该函数有两个参数：resolve和reject。
resolve和reject
resolve和reject是两个函数，用于通知Promise对象异步操作的状态。resolve表示异步操作成功完成，并将结果值传递给Promise。reject表示异步操作失败，并将错误信息传递给Promise。
Promise的状态
Promise对象有三种状态：pending、fulfilled和rejected。pending是初始状态，表示异步操作尚未完成。fulfilled表示异步操作成功完成，并具有一个结果值。rejected表示异步操作失败，并具有一个错误信息。
Promise的链式调用
Promise支持链式调用，即一个Promise的结果可以作为另一个Promise的输入。这使得我们可以将多个异步操作串联起来，并以一种可读的方式处理它们的执行结果。
Promise的then方法
Promise的then方法用于在Promise完成或失败时执行指定的回调函数。then方法接受两个参数：onFulfilled和onRejected。onFulfilled在Promise成功完成时执行，并接收Promise的结果值。onRejected在Promise失败时执行，并接收Promise的错误信息。

实例探索
为了更好地理解原生Promise的用法，我们来看一个实例。以下代码展示了如何使用原生Promise来实现一个简单的异步函数：

// 定义构造函数Promise
function Promise(executor) {
  // 当前Promise的状态
  this.state = "pending";
  // 保存结果值或错误信息
  this.value = undefined;
  // 保存成功回调函数列表
  this.onFulfilledCallbacks = [];
  // 保存失败回调函数列表
  this.onRejectedCallbacks = [];

  // 执行executor函数
  executor(resolve.bind(this), reject.bind(this));

  // 内部函数resolve，用于将Promise的状态改为fulfilled
  function resolve(value) {
    if (this.state !== "pending") {
      return;
    }
    this.state = "fulfilled";
    this.value = value;
    // 执行成功回调函数
    this.onFulfilledCallbacks.forEach(callback => callback(value));
  }

  // 内部函数reject，用于将Promise的状态改为rejected
  function reject(error) {
    if (this.state !== "pending") {
      return;
    }
    this.state = "rejected";
    this.value = error;
    // 执行失败回调函数
    this.onRejectedCallbacks.forEach(callback => callback(error));
  }
}

// 使用Promise实例
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    // 模拟异步操作
    if (Math.random() > 0.5) {
      resolve("成功");
    } else {
      reject("失败");
    }
  }, 1000);
});

// 链式调用Promise
promise
  .then(result => {
    // 成功回调
    console.log(result); // "成功"
  })
  .catch(error => {
    // 失败回调
    console.log(error); // "失败"
  });