解构Promise的构造函数来实现ES6的Promise

2023-12-26 08:00:32

前言

传统的异步回调编程最大的缺陷是：回调地狱，由于业务逻辑非常复杂，代码串行请求好几层；并行请求以前也要通过引用step、async库实现。现在ES6推出了Promise,通过Promise的链式调用可以解决回调地狱问题，通过Promise.all方法可以解决并行请求的问题。现在我将带您逐步了解如何实现符合Promise A+规范的Promise方法，让您能够轻松掌握Promise的原理和用法。

Promise的构造函数

Promise的构造函数接受一个参数，即执行器函数。执行器函数有两个参数，分别是resolve和reject，它们用于向Promise传递成功或失败的结果。

function Promise(executor) {
  this.state = 'pending';
  this.result = undefined;
  this.onResolveCallbacks = [];
  this.onRejectCallbacks = [];

  const resolve = (value) => {
    if (this.state !== 'pending') return;

    this.state = 'fulfilled';
    this.result = value;
    this.onResolveCallbacks.forEach((callback) => callback(value));
  };

  const reject = (reason) => {
    if (this.state !== 'pending') return;

    this.state = 'rejected';
    this.result = reason;
    this.onRejectCallbacks.forEach((callback) => callback(reason));
  };

  executor(resolve, reject);
}

Promise的实例方法

Promise实例提供了一些方法，用于操作和获取Promise的状态和结果。

then()方法

then()方法用于添加成功和失败的回调函数。它接受两个参数，分别是成功回调和失败回调。当Promise的状态改变时，相应的回调函数会被调用。

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

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

catch()方法

catch()方法用于添加失败的回调函数。它接受一个参数，即失败回调。当Promise的状态变为失败时，失败回调函数会被调用。

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

promise.catch((reason) => {
  console.log(reason); // 输出：失败
});

finally()方法

finally()方法用于添加一个无论Promise状态如何都会被调用的回调函数。它接受一个参数，即回调函数。

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

promise.finally(() => {
  console.log('无论成功或失败都会被调用');
});