Promise: 化繁为简，深入浅出地理解Promise

2023-10-25 08:48:08

本文将以通俗易懂的语言，向你讲解什么是 Promise，以及如何使用Promise。如果你之前从未听说过Promise，也不必担心，我们将从最基础的概念讲起，一步步带你深入理解。

Promise 是什么？

Promise 是一种 JavaScript 对象，它表示一个异步操作的最终完成或失败及其结果值。在异步编程中，我们经常需要处理各种各样的异步操作，比如AJAX请求、定时器、文件读取等等。这些操作的特点是，它们不会立即返回结果，而是需要一段时间才能完成。

在传统JavaScript中，我们通常使用回调函数来处理异步操作。回调函数是在异步操作完成后被调用的函数，它可以接收异步操作的结果值。然而，回调函数的使用很快就会变得非常复杂，尤其是当我们需要处理多个异步操作的时候。

Promise 的出现解决了这个问题。它提供了一种更加优雅的方式来处理异步操作。使用 Promise，我们可以将异步操作的结果值包装成一个 Promise 对象，然后在需要的时候再使用 Promise 对象来获取结果值。这使得异步编程更加简单和易于管理。

Promise A+ 规范

Promise A+ 是一个规范，它定义了 Promise 的行为和实现。这个规范由一个名为 TC39 的技术委员会制定，该委员会负责 JavaScript 语言的标准化。Promise A+ 规范确保了不同实现的 Promise 对象具有相同的行为，这使得我们可以在不同的环境中使用 Promise。

如何实现 Promise

实现 Promise 并不难，我们可以通过创建一个简单的构造函数来完成。这个构造函数接收一个函数作为参数，这个函数叫做执行器函数。执行器函数有两个参数，一个是 resolve 函数，一个是 reject 函数。resolve 函数用于将 Promise 的状态设置为已完成，并设置结果值。reject 函数用于将 Promise 的状态设置为已失败，并设置失败原因。

function Promise(executor) {
  this.state = 'pending';
  this.result = undefined;
  this.reason = undefined;

  executor(resolve, reject);

  function resolve(value) {
    if (this.state !== 'pending') {
      return;
    }

    this.state = 'fulfilled';
    this.result = value;
  }

  function reject(reason) {
    if (this.state !== 'pending') {
      return;
    }

    this.state = 'rejected';
    this.reason = reason;
  }
}

如何使用 Promise

使用 Promise 也很简单，我们可以通过调用 Promise 的 then 方法来添加回调函数。then 方法接收两个参数，一个是成功回调函数，一个是失败回调函数。成功回调函数在 Promise 的状态设置为已完成时被调用，失败回调函数在 Promise 的状态设置为已失败时被调用。

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

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