性阿就感的Promise，带你走近它的风采

2023-10-22 05:53:33

在浩瀚的JavaScript世界里，Promise脱颖而出，成为异步编程的宠儿。它以其优雅的语法、强大的功能和广泛的应用，征服了无数开发者的心。今天，我们就将踏上Promise的探索之旅，从它的基本用法开始，一步步了解它的奥秘，最终根据官方规范手写一个Promise。

初识Promise

Promise，一个源于民间的JavaScript库，后被官方招安，成为异步编程的标准解决方案。它之所以如此受欢迎，是因为它解决了传统回调函数的诸多痛点，使异步编程变得更加简单、优雅。

那么，Promise到底是如何工作的呢？其实，它就是一个可以包含两种状态的对象：已完成(resolved)或已拒绝(rejected)。当一个Promise被创建时，它会立即处于挂起(pending)状态，等待着异步操作的完成。一旦异步操作完成，Promise就会根据操作的结果，将状态变为已完成或已拒绝。

Promise的基本用法

Promise的基本用法非常简单，只需要三个步骤：

创建一个Promise对象。
调用Promise对象的then方法，传入两个函数：一个用于处理已完成状态，另一个用于处理已拒绝状态。
在异步操作完成时，调用Promise对象的resolve方法或reject方法，将Promise的状态变为已完成或已拒绝。

举个例子，我们使用Promise来处理一个异步的AJAX请求：

const promise = new Promise((resolve, reject) => {
  const request = new XMLHttpRequest();
  request.open('GET', 'https://example.com/api/data');
  request.onload = () => {
    if (request.status === 200) {
      resolve(request.responseText);
    } else {
      reject(new Error('请求失败'));
    }
  };
  request.send();
});

promise.then(data => {
  // 请求成功，处理数据
}, error => {
  // 请求失败，处理错误
});

Promise的本质与核心原理

为了更深入地理解Promise，我们还需要了解它的本质与核心原理。

Promise的本质其实就是一个对象，它封装了异步操作的状态和结果。而它的核心原理就是利用事件循环来实现异步编程。当一个异步操作被触发时，它会被放入事件队列中。事件循环会不断地从事件队列中取出事件，并执行对应的回调函数。当一个Promise的状态发生变化时，它会触发一个事件，并将这个事件放入事件队列中。事件循环会执行这个事件，从而调用Promise对象的then方法中对应的函数，来处理已完成或已拒绝状态。

手写Promise

最后，我们再来挑战一下，根据官方规范手写一个Promise。这将是一个非常有意义的练习，它可以帮助我们更加深入地理解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 === 'fulfilled') {
        setTimeout(() => {
          try {
            const result = onFulfilled(this.value);
            resolve(result);
          } catch (error) {
            reject(error);
          }
        }, 0);
      } else if (this.state === 'rejected') {
        setTimeout(() => {
          try {
            const result = onRejected(this.reason);
            resolve(result);
          } catch (error) {
            reject(error);
          }
        }, 0);
      } else {
        this.onFulfilledCallbacks.push(() => {
          setTimeout(() => {
            try {
              const result = onFulfilled(this.value);
              resolve(result);
            } catch (error) {
              reject(error);
            }
          }, 0);
        });
        this.onRejectedCallbacks.push(() => {
          setTimeout(() => {
            try {
              const result = onRejected(this.reason);
              resolve(result);
            } catch (error) {
              reject(error);
            }
          }, 0);
        });
      }
    });
  }

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

  finally(onFinally) {
    return this.then(
      value => Promise.resolve(onFinally()).then(() => value),
      reason => Promise.resolve(onFinally()).then(() => { throw reason; })
    );
  }
}