Promise 入门教程：理解背后的强大力量

2023-10-05 08:46:00

如果你还没有实现过 Promise，那么这篇文章就是为你而写。Promise是一种用于处理异步编程的强大工具，它可以帮助你编写更简洁、更易于维护的代码。在这篇文章中，我们将从头开始实现一个符合Promise A+规范的Promise，并通过详细的解释和示例帮助你理解Promise背后的强大力量。

Promise 的核心思想是将异步操作的结果包装成一个对象，并提供一个统一的接口来处理这些结果。这意味着你可以将异步操作视为一个同步操作，而不用担心底层的复杂性。

Promise 的基本使用

为了理解 Promise 的基本使用，我们先来看一个简单的例子：

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

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

在这个例子中，我们首先创建了一个 Promise 对象，并传入了一个执行器函数。执行器函数有两个参数：resolve 和 reject。resolve 用于将异步操作的结果传递给 Promise，而 reject 用于将错误传递给 Promise。

接下来，我们调用 Promise 对象的 then 方法，并传入一个回调函数。回调函数将接收 Promise 的结果作为参数。当 Promise 的结果可用时，回调函数就会被调用。

在上面的例子中，我们使用 setTimeout 函数模拟了一个异步操作。当 setTimeout 函数执行完毕后，它会调用 resolve 函数，并将结果 'Hello, world!' 传递给 Promise。这时，Promise 的状态就会变成 resolved，并且 then 方法中的回调函数就会被调用，并将 'Hello, world!' 输出到控制台。

Promise 的状态

Promise 有三种状态：pending、resolved 和 rejected。

pending：这是 Promise 的初始状态。当 Promise 被创建时，它处于 pending 状态。
resolved：当 Promise 的结果可用时，它会变成 resolved 状态。
rejected：当 Promise 发生错误时，它会变成 rejected 状态。

Promise 的状态一旦改变，就无法再改变。这意味着 Promise 只会经历一次状态转换，从 pending 到 resolved 或 rejected。

Promise 的方法

Promise 提供了几个方法来处理其结果。这些方法包括：

then：then 方法用于处理 Promise 的结果。它接受两个回调函数作为参数：第一个回调函数用于处理 Promise 的结果，第二个回调函数用于处理 Promise 的错误。
catch：catch 方法用于处理 Promise 的错误。它只接受一个回调函数作为参数，该回调函数将接收 Promise 的错误作为参数。
finally：finally 方法用于在 Promise 的结果或错误可用后执行一些操作。它接受一个回调函数作为参数，该回调函数不会接收任何参数。

Promise 的实现

现在，让我们从头开始实现一个符合 Promise A+ 规范的 Promise。

class Promise {
  constructor(executor) {
    this.state = 'pending';
    this.result = undefined;
    this.error = undefined;
    this.onResolveCallbacks = [];
    this.onRejectCallbacks = [];

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

      this.state = 'resolved';
      this.result = result;

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

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

      this.state = 'rejected';
      this.error = error;

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

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

  then(onResolve, onReject) {
    if (typeof onResolve !== 'function') {
      onResolve = (result) => result;
    }

    if (typeof onReject !== 'function') {
      onReject = (error) => {
        throw error;
      };
    }

    const promise = new Promise((resolve, reject) => {
      if (this.state === 'pending') {
        this.onResolveCallbacks.push(() => {
          try {
            const result = onResolve(this.result);
            resolve(result);
          } catch (error) {
            reject(error);
          }
        });

        this.onRejectCallbacks.push(() => {
          try {
            const error = onReject(this.error);
            reject(error);
          } catch (error) {
            reject(error);
          }
        });
      } else if (this.state === 'resolved') {
        setTimeout(() => {
          try {
            const result = onResolve(this.result);
            resolve(result);
          } catch (error) {
            reject(error);
          }
        }, 0);
      } else if (this.state === 'rejected') {
        setTimeout(() => {
          try {
            const error = onReject(this.error);
            reject(error);
          } catch (error) {
            reject(error);
          }
        }, 0);
      }
    });

    return promise;
  }

  catch(onReject) {
    return this.then(undefined, onReject);
  }

  finally(onFinally) {
    return this.then(
      (result) => {
        onFinally();
        return result;
      },
      (error) => {
        onFinally();
        throw error;
      }
    );
  }
}