Promise的使用及自定义：打造更加优雅的异步编程体验

Promise使用及自定义

什么是Promise?

抽象表达：JS中解决异步编程的新的解决方案（原先异步编程的解决方式是使用回调函数，回调函数本身没有问题，问题是多个回调函数嵌套，容易形成回调地狱，Promise就是为了解决这个问题）。

具体表达：Promise是一个表示异步操作的最终完成或失败状态的对象。一个Promise可以处于三种状态之一：等待、成功或失败。等待状态表示操作尚未完成，成功状态表示操作已成功完成，失败状态表示操作已失败。

Promise的使用

// 创建一个Promise对象
const promise = new Promise((resolve, reject) => {
  // 在Promise构造函数中，传入一个函数，该函数接收两个参数resolve和reject。
  // resolve函数用于将Promise的状态设置为成功，reject函数用于将Promise的状态设置为失败。

  // 异步操作
  setTimeout(() => {
    // 操作成功后，调用resolve函数将Promise的状态设置为成功
    resolve("操作成功！");
  }, 1000);
});

// 在Promise对象上调用then方法，传入两个函数作为参数
promise.then(
  (result) => {
    // 第一个函数在Promise的状态为成功时执行，它接收一个参数result，该参数是resolve函数传递的成功结果。
    console.log(result); // "操作成功！"
  },
  (error) => {
    // 第二个函数在Promise的状态为失败时执行，它接收一个参数error，该参数是reject函数传递的失败原因。
    console.error(error);
  }
);

Promise的自定义

可以自定义自己的Promise，可以根据需求定义不同的状态和不同的处理方式。

class MyPromise {
  constructor(executor) {
    this.state = "pending"; // 初始状态为等待
    this.successCallbacks = []; // 成功回调函数队列
    this.failureCallbacks = []; // 失败回调函数队列

    // 立即执行executor函数，并传入resolve和reject两个函数，用于改变Promise的状态
    executor(this.resolve.bind(this), this.reject.bind(this));
  }

  resolve(result) {
    // 将状态改为成功
    this.state = "success";

    // 执行所有成功回调函数
    this.successCallbacks.forEach((callback) => {
      callback(result);
    });
  }

  reject(reason) {
    // 将状态改为失败
    this.state = "failure";

    // 执行所有失败回调函数
    this.failureCallbacks.forEach((callback) => {
      callback(reason);
    });
  }

  then(successCallback, failureCallback) {
    // 将成功回调函数添加到队列
    if (successCallback) {
      this.successCallbacks.push(successCallback);
    }

    // 将失败回调函数添加到队列
    if (failureCallback) {
      this.failureCallbacks.push(failureCallback);
    }

    // 返回一个新的Promise对象
    return new MyPromise((resolve, reject) => {
      // 在当前Promise状态为成功时，执行成功回调函数并传递结果
      if (this.state === "success") {
        resolve(successCallback(this.result));
      }

      // 在当前Promise状态为失败时，执行失败回调函数并传递原因
      if (this.state === "failure") {
        reject(failureCallback(this.reason));
      }
    });
  }
}

使用自定义的Promise：

const myPromise = new MyPromise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    if (成功) {
      resolve("操作成功！");
    } else {
      reject("操作失败！");
    }
  }, 1000);
});

myPromise.then(
  (result) => {
    console.log(result); // "操作成功！"
  },
  (error) => {
    console.error(error); // "操作失败！"
  }
);