Promise/A+ 实现简单版本剖析

2023-10-27 13:55:39

Promise/A+规范：异步编程的基石

序言

在现代Web开发中，异步编程变得越来越普遍，因为它允许应用程序在不阻塞主线程的情况下执行任务。Promise/A+规范是JavaScript异步编程的标准，它为Promise对象的行为和用法提供了指导。本文将深入探讨Promise/A+规范，并通过示例代码展示其实际应用。

Promise/A+规范：简介

Promise对象表示异步操作的最终完成或失败结果。它有三种状态：

待定（pending）： 异步操作尚未完成。
已完成（fulfilled）： 异步操作已完成并具有结果值。
已拒绝（rejected）： 异步操作已完成但发生错误。

Promise对象可以通过.then()方法添加回调函数，以便在异步操作完成后执行。.then()方法接收两个参数：

成功回调函数（onFulfilled）： 在异步操作完成并有结果值时执行。
失败回调函数（onRejected）： 在异步操作完成但发生错误时执行。

Promise/A+规范：实现

以下是一个简化版的Promise实现，遵循Promise/A+规范：

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

    // 执行器函数
    executor(resolve, reject);

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

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

  then(onFulfilled, onRejected) {
    // 如果onFulfilled不是函数，则使用默认函数返回结果值
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
    // 如果onRejected不是函数，则使用默认函数抛出错误原因
    onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason; };

    // 返回一个新的Promise对象
    return new Promise((resolve, reject) => {
      // 将成功回调函数添加到队列中
      this.onFulfilledCallbacks.push(value => {
        // 异步执行成功回调函数
        setTimeout(() => {
          try {
            // 执行成功回调函数并获取结果值
            const result = onFulfilled(value);
            // 将结果值解析为Promise对象
            resolve(result);
          } catch (error) {
            // 捕获并拒绝新的Promise对象
            reject(error);
          }
        }, 0);
      });

      // 将失败回调函数添加到队列中
      this.onRejectedCallbacks.push(reason => {
        // 异步执行失败回调函数
        setTimeout(() => {
          try {
            // 执行失败回调函数并获取结果值
            const result = onRejected(reason);
            // 将结果值解析为Promise对象
            resolve(result);
          } catch (error) {
            // 捕获并拒绝新的Promise对象
            reject(error);
          }
        }, 0);
      });
    });
  }
}

Promise/A+规范：用法

// 创建一个Promise对象
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    // 模拟异步操作
    const result = Math.random() > 0.5 ? '成功' : '失败';
    if (result === '成功') {
      // 异步操作成功，调用resolve函数并传入结果值
      resolve(result);
    } else {
      // 异步操作失败，调用reject函数并传入错误原因
      reject('错误');
    }
  }, 1000);
});

// 使用then方法添加回调函数
promise.then(result => {
  // 成功回调函数
  console.log('异步操作成功，结果：', result);
}, reason => {
  // 失败回调函数
  console.log('异步操作失败，错误原因：', reason);
});