Promise的简单实现，告别回调嵌套

2024-02-11 09:31:46

Promise本意是承诺，旨在解决异步操作的回调嵌套问题。它使异步编程更加简单、清晰和易于管理。在深入研究之前，我们先来看个简短的例子。

假设我们有两个函数，函数A需要等待函数B的结果。在传统的回调方法中，我们可以将函数B作为函数A的参数传递，如下所示：

functionA(functionB) {
  functionB(function(result) {
    // 使用result
  });
}

这种嵌套的回调函数很容易导致难以阅读和维护的代码，尤其是当我们有更多函数需要等待结果时。

Promise的出现就是为了解决这个问题。它提供了一种更优雅的方式来处理异步操作，允许我们将回调函数写成链式结构，如下所示：

functionA()
  .then(functionB)
  .then(functionC)
  .then(functionD);

上面的代码中，我们使用.then()方法将函数B、函数C和函数D链接起来。每个函数都是一个Promise，它们按照顺序执行。当一个Promise执行完毕，就会调用下一个Promise。

要实现Promise，我们需要一个Promise类。该类可以用来创建一个Promise对象，并提供.then()和.catch()方法。Promise类的基本结构如下：

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

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

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

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

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

    executor(resolve, reject);
  }

  then(onFulfilled, onRejected) {
    return new Promise((resolve, reject) => {
      this.callbacks.push((result) => {
        if (this.state === "fulfilled") {
          const result2 = onFulfilled(result);
          resolve(result2);
        } else if (this.state === "rejected") {
          const error = onRejected(result);
          reject(error);
        }
      });
    });
  }

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

现在，我们已经实现了基本的Promise。它可以用来处理简单的异步操作，比如获取一个JSON文件。

const promise = new Promise((resolve, reject) => {
  const request = new XMLHttpRequest();
  request.open("GET", "data.json");
  request.onload = () => {
    if (request.status === 200) {
      resolve(JSON.parse(request.responseText));
    } else {
      reject(new Error("Error fetching data"));
    }
  };
  request.send();
});

promise
  .then((data) => {
    // 使用数据
  })
  .catch((error) => {
    // 处理错误
  });