深入剖析 Promise 用法与源码，助你揭开 JavaScript 异步编程奥秘

2023-09-13 02:46:15

在当今快速发展的互联网世界中，异步编程变得越来越普遍。JavaScript作为一门单线程语言，如何在不阻塞主线程的情况下处理复杂多变的异步操作，Promise应运而生。

Promise本身就是一个异步编程的方案，让处理过程变得更简单。es6引入promise特性来处理JavaScript中的异步场景。以前，处理异步最常用的方法就是回调函数，但是当过程稍微复杂一点，多个异步操作集中在一起的时候，就容易出现一个回调金字塔的情况，可读性和可维护性都非常差。

Promise的出现，使得我们可以将异步操作封装成一个Promise对象，并通过then方法来处理其结果。这种方式使得代码更加清晰易懂，也更易于维护。

Promise 的基本用法

Promise的使用非常简单，它提供了一个then方法来处理其结果。then方法接受两个参数，分别是成功回调和失败回调。当Promise对象的状态变为已完成时，会调用成功回调；当Promise对象的状态变为已拒绝时，会调用失败回调。

const promise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    // 成功
    resolve('成功的结果');
  }, 1000);
});

promise.then((result) => {
  // 成功回调
  console.log(result); // '成功的结果'
}, (error) => {
  // 失败回调
  console.log(error);
});

Promise 的源码分析

Promise的源码相对比较复杂，但其基本原理并不难理解。Promise对象内部维护着一个状态，可以是三种状态之一：等待中、已完成和已拒绝。当Promise对象的状态变为已完成时，会调用成功回调；当Promise对象的状态变为已拒绝时，会调用失败回调。

class Promise {
  constructor(executor) {
    this.state = 'pending'; // 初始状态为等待中
    this.result = null; // 结果
    this.onFulfilledCallbacks = []; // 成功回调队列
    this.onRejectedCallbacks = []; // 失败回调队列

    // 执行器函数立即执行，传入resolve和reject两个函数
    try {
      executor(resolve, reject);
    } catch (error) {
      reject(error);
    }
  }

  then(onFulfilled, onRejected) {
    // 将成功回调和失败回调添加到相应的队列中
    this.onFulfilledCallbacks.push(onFulfilled);
    this.onRejectedCallbacks.push(onRejected);

    // 如果状态已经变为已完成或已拒绝，则立即执行相应的回调
    if (this.state === 'fulfilled') {
      onFulfilled(this.result);
    } else if (this.state === 'rejected') {
      onRejected(this.error);
    }

    return this; // 返回Promise对象，实现链式调用
  }

  resolve(result) {
    // 将状态变为已完成
    this.state = 'fulfilled';

    // 将结果存储起来
    this.result = result;

    // 执行成功回调队列中的所有回调函数
    this.onFulfilledCallbacks.forEach((callback) => {
      callback(result);
    });
  }

  reject(error) {
    // 将状态变为已拒绝
    this.state = 'rejected';

    // 将错误信息存储起来
    this.error = error;

    // 执行失败回调队列中的所有回调函数
    this.onRejectedCallbacks.forEach((callback) => {
      callback(error);
    });
  }
}