28.前端小知识:手写 JS Promise:深入理解异步编程

亲爱的前端小伙伴们，你们好！今天，我们要一起探讨一个神秘而有趣的话题——手写JS Promise。Promise，这个在前端开发中无处不在的家伙，可以说是异步编程的魔法棒。它让我们能够以一种优雅、简洁的方式处理异步操作，避免回调地狱（Callback Hell）的困扰。那么，让我们一起来揭开Promise的神秘面纱，看看它是如何工作的吧！

首先，我们需要明白什么是Promise。Promise是一种表示异步操作最终完成或失败的对象。它有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。一旦Promise的状态从pending变为fulfilled或rejected，就不会再改变。这就像是一个煮熟的鸭子，不会再飞回锅里。

现在，我们来手写一个简单的Promise实现。我们将创建一个名为MyPromise的类，它具有then和catch方法，用于处理异步操作的结果。

class MyPromise {  
  constructor(executor) {  
    this.status = 'pending'; // 初始状态为pending  
    this.value = undefined; // 成功时的值  
    this.reason = undefined; // 失败时的原因  
    this.onFulfilledCallbacks = []; // 成功时的回调函数数组  
    this.onRejectedCallbacks = []; // 失败时的回调函数数组  
  
    const resolve = (value) => {  
      if (this.status === 'pending') {  
        this.status = 'fulfilled';  
        this.value = value;  
        this.onFulfilledCallbacks.forEach((fn) => fn());  
      }  
    };  
  
    const reject = (reason) => {  
      if (this.status === 'pending') {  
        this.status = 'rejected';  
        this.reason = reason;  
        this.onRejectedCallbacks.forEach((fn) => fn());  
      }  
    };  
  
    try {  
      executor(resolve, reject);  
    } catch (err) {  
      reject(err);  
    }  
  }  
  
  then(onFulfilled, onRejected) {  
    if (this.status === 'fulfilled') {  
      onFulfilled(this.value);  
    }  
    if (this.status === 'rejected') {  
      onRejected(this.reason);  
    }  
    if (this.status === 'pending') {  
      this.onFulfilledCallbacks.push(() => {  
        onFulfilled(this.value);  
      });  
      this.onRejectedCallbacks.push(() => {  
        onRejected(this.reason);  
      });  
    }  
  }  
  
  catch(onRejected) {  
    this.then(null, onRejected);  
  }  
}

在上面的代码中，我们创建了一个MyPromise类，并在构造函数中接收一个执行器函数executor。这个执行器函数接收两个参数：resolve和reject，分别用于表示异步操作成功和失败的情况。当异步操作成功时，我们调用resolve函数，并将结果作为参数传递给它；当异步操作失败时，我们调用reject函数，并将失败的原因作为参数传递给它。

在then方法中，我们根据Promise的当前状态来执行相应的回调函数。如果Promise已经成功（status为fulfilled），则执行onFulfilled回调函数，并将成功的结果作为参数传递给它；如果Promise已经失败（status为rejected），则执行onRejected回调函数，并将失败的原因作为参数传递给它。如果Promise还在进行中（status为pending），则将回调函数分别添加到onFulfilledCallbacks和onRejectedCallbacks数组中，等待状态改变后再执行。

catch方法则是一个简化版的then方法，它只处理失败的情况。通过调用this.then(null, onRejected)，我们将失败时的回调函数传递给then方法。

现在，我们已经手写了一个简单的Promise实现。当然，这只是一个基础的版本，还有很多细节和特性没有涵盖，比如链式调用、静态方法Promise.all、Promise.race等。但是，通过上面的代码，你应该对Promise的工作原理有了更深入的理解。

最后，让我们来总结一下。Promise是一种表示异步操作最终完成或失败的对象，它有三种状态：pending、fulfilled和rejected。通过手写一个简单的Promise实现，我们可以更深入地理解异步编程的魔法棒是如何工作的。希望这篇博客能够帮助你更好地理解和应用Promise，让你的异步编程之路更加顺畅！