玩转JS异步编程之Promise机制深入解析及实现

前端

2023-03-31 00:09:53

JavaScript中Promise的全面指南

异步编程和回调地狱

在JavaScript中，异步编程允许执行长时间运行的操作，而不会阻塞其他操作。然而，处理异步操作时，经常会遇到“回调地狱”的问题，即需要使用嵌套回调函数来处理结果，这使得代码难以阅读和维护。

Promise的出现

Promise的诞生是为了解决回调地狱的问题。Promise是一个表示异步操作结果的对象。我们可以使用Promise来处理异步操作，而无需使用嵌套的回调函数，从而使代码更易于阅读和维护。

Promise的基本机制

Promise具有三种状态：“pending”、“fulfilled”和“rejected”。“pending”表示操作正在进行中，“fulfilled”表示操作已成功完成，“rejected”表示操作已失败。

我们可以使用then()方法来处理Promise的状态。then()方法接受两个参数：fulfilled时的回调函数和rejected时的回调函数。

当Promise的状态变为“fulfilled”时，会调用fulfilled时的回调函数。当Promise的状态变为“rejected”时，会调用rejected时的回调函数。

Promise还提供了一些其他的方法，如catch()和finally()等，可以帮助我们更好地处理Promise。

用JavaScript实现一个Promise

以下是使用JavaScript实现一个Promise的示例：

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

  const resolve = (result) => {
    setTimeout(() => {
      if (this.state !== "pending") return;
      this.state = "fulfilled";
      this.result = result;
      this.onFulfilledCallbacks.forEach((callback) => callback(result));
    }, 0);
  };

  const reject = (error) => {
    setTimeout(() => {
      if (this.state !== "pending") return;
      this.state = "rejected";
      this.result = error;
      this.onRejectedCallbacks.forEach((callback) => callback(error));
    }, 0);
  };

  executor(resolve, reject);
}

Promise.prototype.then = function (onFulfilled, onRejected) {
  return new Promise((resolve, reject) => {
    if (this.state === "fulfilled") {
      setTimeout(() => {
        try {
          const result = onFulfilled(this.result);
          resolve(result);
        } catch (error) {
          reject(error);
        }
      }, 0);
    } else if (this.state === "rejected") {
      setTimeout(() => {
        try {
          const result = onRejected(this.result);
          resolve(result);
        } catch (error) {
          reject(error);
        }
      }, 0);
    } else {
      this.onFulfilledCallbacks.push(() => {
        setTimeout(() => {
          try {
            const result = onFulfilled(this.result);
            resolve(result);
          } catch (error) {
            reject(error);
          }
        }, 0);
      });
      this.onRejectedCallbacks.push(() => {
        setTimeout(() => {
          try {
            const result = onRejected(this.result);
            resolve(result);
          } catch (error) {
            reject(error);
          }
        }, 0);
      });
    }
  });
};

Promise.prototype.catch = function (onRejected) {
  return this.then(undefined, onRejected);
};

使用Promise

我们可以使用Promise来处理异步操作。以下是一个示例：

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("数据加载成功");
  }, 1000);
});

promise.then((data) => {
  console.log(data);
}).catch((error) => {
  console.log(error);
});