掌握Promise特性，亲手构建你的异步武器库

前端

2023-11-23 10:26:45

Promise：异步编程的革命性利器

什么是Promise？

在前端开发中，异步编程是不可或缺的，它让我们可以处理来自服务器的数据、加载外部资源和执行复杂的操作，而不会阻塞浏览器。早期，JavaScript中处理异步编程的主要方式是使用回调函数，但这会带来代码可读性和可维护性方面的挑战。

为了解决这个问题，Promise应运而生。Promise是一个对象，它表示异步操作的结果及其状态。它提供了清晰简洁的语法来处理异步操作，让代码更易于理解和管理。

Promise的特性

Promise具有以下主要特性：

状态： 每个Promise都有一个状态，可以是等待（pending）、已完成（fulfilled）或已拒绝（rejected）。
结果： 已完成的Promise包含一个结果值，而已拒绝的Promise包含一个错误对象。
then()方法： then()方法用于处理已完成的Promise。它接收两个参数：处理结果值的函数和处理错误对象的函数。
catch()方法： catch()方法用于处理已拒绝的Promise。它接收一个处理错误对象的函数。
Promise.all()方法： Promise.all()方法用于处理多个Promise。它接收一个Promise数组，并返回一个新的Promise，该Promise在所有输入Promise都已完成时才会完成。
Promise.race()方法： Promise.race()方法用于处理多个Promise。它接收一个Promise数组，并返回一个新的Promise，该Promise在第一个输入Promise完成或拒绝时就会完成或拒绝。

手写一个简单的Promise

要理解Promise的实际运作原理，我们不妨自己编写一个简单的Promise。下面是一个示例实现：

function Promise(executor) {
  // 初始化状态、结果和回调队列
  this.state = 'pending';
  this.result = undefined;
  this.onFulfilledCallbacks = [];
  this.onRejectedCallbacks = [];

  // 定义resolve和reject函数
  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
  executor(resolve, reject);
}

Promise的使用

有了自定义的Promise，我们就可以开始使用它来编写异步代码了。下面是一个使用示例：

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Hello, world!');
  }, 2000);
});

promise
  .then((result) => {
    console.log(result); // 输出: Hello, world!
  })
  .catch((error) => {
    console.log(error);
  });