全网最详手写Promise实现指南：从原理到实战

前端

2023-04-07 03:31:34

Promise：掌控异步世界的利器

什么是Promise？

想象一下JavaScript中异步操作的江湖，那里充斥着复杂的回调函数，就像武侠小说中的乱世群雄。这时，Promise横空出世，宛如一位武林盟主，用它优雅的链式调用和清晰的状态管理，让异步操作变得井然有序。

Promise的本质

Promise本质上是一个容器，它盛放着异步操作的结果，有三种状态：Pending（待定）、Fulfilled（已完成）和Rejected（已失败）。

Promise的运作原理

当一个异步操作发起时，Promise被创建并处于Pending状态。操作成功完成后，Promise通过resolve方法被Fulfilled；如果操作失败，则通过reject方法被Rejected。

Promise的API

Promise提供了以下API：

then： 链式调用Promise，根据其状态执行不同的回调函数。
catch： 专门处理Promise的Rejected状态。
finally： 无论Promise是Fulfilled还是Rejected都会执行。

Promise的应用

Promise在JavaScript中广泛应用于：

AJAX请求
文件读取
定时器
事件处理

手写实现Promise

虽然Promise是JavaScript原生支持的，但我们可以尝试手写实现它来加深理解：

function Promise(executor) {
  this.state = "pending";
  this.result = null;
  this.onFulfilledCallbacks = [];
  this.onRejectedCallbacks = [];

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

    this.state = "fulfilled";
    this.result = result;

    this.onFulfilledCallbacks.forEach((callback) => {
      callback(result);
    });
  };

  const reject = (error) => {
    if (this.state !== "pending") {
      return;
    }

    this.state = "rejected";
    this.result = error;

    this.onRejectedCallbacks.forEach((callback) => {
      callback(error);
    });
  };

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

实战手写Promise

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("异步操作完成");
  }, 1000);
});

myPromise
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.error(error);
  });