手把手构建简版 Promise —— 初探 Promise 奥秘

前言

在当今技术领域，处理异步操作是编程人员必须面对的一大挑战。无论是服务器端的开发，还是客户端的开发，异步操作无处不在。ES6 中引入的 Promise 是一个非常有用的工具，它可以帮助我们处理异步操作，让我们的代码更加清晰、易读。

Promise 的实现思路

Promise 的实现思路很简单，它是一个拥有三个状态的对象：Pending、Fulfilled 和 Rejected。Pending 表示 Promise 处于等待状态，Fulfilled 表示 Promise 已经成功完成，Rejected 表示 Promise 已经失败。Promise 的实现需要两个回调函数：resolve 和 reject。resolve 函数用于将 Promise 的状态从 Pending 变成 Fulfilled，reject 函数用于将 Promise 的状态从 Pending 变成 Rejected。

Promise A+ 规范

Promise A+ 规范是一个关于 Promise 实现的规范，它规定了 Promise 的行为和实现方式。Promise A+ 规范定义了以下内容：

• Promise 的状态：Promise 只能处于 Pending、Fulfilled 和 Rejected 三种状态之一。
• Promise 的回调函数：resolve 和 reject 函数用于改变 Promise 的状态。
• Promise 的链式调用：Promise 可以使用 then 方法进行链式调用，当 Promise 的状态改变时，会执行相应的回调函数。
• Promise 的错误处理：Promise 可以使用 catch 方法来处理错误，当 Promise 的状态变成 Rejected 时，会执行 catch 方法中的回调函数。

Promise 简版实现

基于 Promise A+ 规范，我们可以实现一个简版的 Promise。代码如下：

class Promise {
  constructor(executor) {
    this.state = 'pending';
    this.value = undefined;
    this.reason = undefined;
    this.onFulfilledCallbacks = [];
    this.onRejectedCallbacks = [];

    const resolve = (value) => {
      if (this.state !== 'pending') return;
      this.state = 'fulfilled';
      this.value = value;
      this.onFulfilledCallbacks.forEach((callback) => {
        callback(value);
      });
    };

    const reject = (reason) => {
      if (this.state !== 'pending') return;
      this.state = 'rejected';
      this.reason = reason;
      this.onRejectedCallbacks.forEach((callback) => {
        callback(reason);
      });
    };

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

  then(onFulfilled, onRejected) {
    return new Promise((resolve, reject) => {
      if (this.state === 'pending') {
        this.onFulfilledCallbacks.push(() => {
          try {
            const value = onFulfilled(this.value);
            resolve(value);
          } catch (error) {
            reject(error);
          }
        });
        this.onRejectedCallbacks.push(() => {
          try {
            const reason = onRejected(this.reason);
            resolve(reason);
          } catch (error) {
            reject(error);
          }
        });
      } else if (this.state === 'fulfilled') {
        try {
          const value = onFulfilled(this.value);
          resolve(value);
        } catch (error) {
          reject(error);
        }
      } else if (this.state === 'rejected') {
        try {
          const reason = onRejected(this.reason);
          resolve(reason);
        } catch (error) {
          reject(error);
        }
      }
    });
  }

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

功能测试

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

promise.then((value) => {
  console.log(value); // 输出: hello world
});

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

promise.catch((reason) => {
  console.log(reason); // 输出: error
});

结语

通过手写 Promise 源码，我们对 Promise 的实现原理有了更深入的理解。Promise A+ 规范为我们提供了 Promise 的标准实现方式，我们可以根据该规范实现自己的 Promise。Promise 的链式调用和错误处理机制使其成为处理异步操作的利器，在实际开发中具有广泛的应用场景。

希望本文对您理解 Promise 有所帮助。如果您有任何问题或建议，欢迎在评论区留言。