掌握 Promise 的方法精髓，纵横异步编程**

前端

2023-12-04 07:08:14

前言：Promise 的舞台

在异步编程的世界中，Promise 闪耀着夺目的光彩，作为管理异步操作的利器，它简化了复杂的回调机制，为开发者带来了优雅且可控的解决方案。

一、Promise 实例方法

1. then(onFulfilled, onRejected)

then() 是 Promise 的核心方法，用于处理成功或失败的结果。它接受两个回调函数：onFulfilled 和 onRejected，分别处理 resolve() 和 reject() 的结果。

2. catch(onRejected)

catch() 方法是对 then() 的简化，专门处理 Promise 的失败结果。它接受一个回调函数 onRejected，用于捕获并处理 reject() 的结果。

3. finally(onFinally)

finally() 方法在 Promise 无论成功还是失败后都会执行。它接受一个回调函数 onFinally，用于执行一些收尾工作或清理操作。

二、Promise 静态方法

1. all(iterable)

all() 方法接受一个可迭代对象（如数组），其中包含多个 Promise。它返回一个新的 Promise，该 Promise 在所有传入的 Promise 都 resolve() 或 reject() 后才 resolve() 或 reject()。

2. race(iterable)

race() 方法与 all() 类似，但它返回一个新的 Promise，该 Promise 在传入的 Promise 中的第一个 resolve() 或 reject() 后就 resolve() 或 reject()。

3. resolve(value)

resolve() 方法创建一个已 resolve() 的 Promise，并立即将其传递给 then() 或 catch() 处理程序。

4. reject(reason)

reject() 方法创建一个已 reject() 的 Promise，并立即将其传递给 catch() 处理程序。

三、手动实现 Promise

虽然 Promise 内置于 JavaScript 中，但我们可以手动实现自己的 Promise 类来深入理解其工作原理。以下是手动实现 Promise 的步骤：

class MyPromise {
  constructor(executor) {
    this.state = "pending";
    this.result = null;
    this.callbacks = [];

    executor(this.resolve.bind(this), this.reject.bind(this));
  }

  resolve(result) {
    if (this.state !== "pending") return;

    this.state = "fulfilled";
    this.result = result;
    this.callbacks.forEach((callback) => callback.onFulfilled(result));
  }

  reject(reason) {
    if (this.state !== "pending") return;

    this.state = "rejected";
    this.result = reason;
    this.callbacks.forEach((callback) => callback.onRejected(reason));
  }

  then(onFulfilled, onRejected) {
    return new MyPromise((resolve, reject) => {
      this.callbacks.push({ onFulfilled, onRejected });

      if (this.state === "fulfilled") {
        resolve(this.result);
      } else if (this.state === "rejected") {
        reject(this.result);
      }
    });
  }

  catch(onRejected) {
    return this.then(null, onRejected);
  }

  finally(onFinally) {
    return this.then(onFinally, onFinally);
  }
}