JavaScript怎么實現簡易的Promise對象

JavaScript怎么實現簡易的Promise對象

引言

在現代JavaScript開發中，Promise對象已經成為了處理異步操作的標準工具。它提供了一種更加優雅和可讀的方式來處理異步代碼，避免了傳統的回調地獄（Callback Hell）問題。雖然JavaScript原生支持Promise，但理解其內部實現機制對于深入掌握異步編程至關重要。本文將帶領你一步步實現一個簡易的Promise對象，幫助你更好地理解其工作原理。

1. Promise的基本概念

在開始實現之前，我們先回顧一下Promise的基本概念。

1.1 什么是Promise？

Promise是一個表示異步操作最終完成或失敗的對象。它有三種狀態：

• Pending（等待）：初始狀態，既不是成功，也不是失敗。
• Fulfilled（已完成）：表示操作成功完成。
• Rejected（已拒絕）：表示操作失敗。

1.2 Promise的基本用法

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

promise.then((value) => {
  console.log(value); // 輸出: Success!
}).catch((error) => {
  console.error(error);
});

在上面的例子中，Promise在1秒后成功完成，并調用then方法中的回調函數。

2. 實現簡易Promise

接下來，我們將一步步實現一個簡易的Promise對象。我們將從最基本的Promise構造函數開始，逐步添加then、catch等方法。

2.1 構造函數

首先，我們需要定義一個Promise構造函數。這個構造函數接受一個執行器函數（executor），該函數有兩個參數：resolve和reject。

class MyPromise {
  constructor(executor) {
    this.state = 'pending'; // 初始狀態為pending
    this.value = undefined; // 存儲成功的結果
    this.reason = undefined; // 存儲失敗的原因
    this.onFulfilledCallbacks = []; // 存儲成功的回調函數
    this.onRejectedCallbacks = []; // 存儲失敗的回調函數

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

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

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

在這個構造函數中，我們定義了resolve和reject函數，并在執行器函數中調用它們。我們還維護了一個狀態機，確保Promise的狀態只能從pending變為fulfilled或rejected。

2.2 實現then方法

then方法是Promise的核心方法之一，它用于注冊Promise成功或失敗時的回調函數。

class MyPromise {
  // ... 之前的代碼

  then(onFulfilled, onRejected) {
    if (this.state === 'fulfilled') {
      onFulfilled(this.value);
    } else if (this.state === 'rejected') {
      onRejected(this.reason);
    } else {
      this.onFulfilledCallbacks.push(onFulfilled);
      this.onRejectedCallbacks.push(onRejected);
    }
  }
}

在這個實現中，如果Promise已經完成或失敗，我們直接調用相應的回調函數。否則，我們將回調函數存儲在數組中，等待Promise狀態改變時調用。

2.3 實現catch方法

catch方法用于處理Promise失敗的情況，它實際上是then方法的一個特例。

class MyPromise {
  // ... 之前的代碼

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

catch方法只是簡單地調用了then方法，并傳入null作為onFulfilled回調。

2.4 實現鏈式調用

Promise的一個重要特性是支持鏈式調用。為了實現這一點，我們需要讓then方法返回一個新的Promise對象。

class MyPromise {
  // ... 之前的代碼

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

        this.onRejectedCallbacks.push((reason) => {
          try {
            const result = onRejected(reason);
            resolve(result);
          } catch (error) {
            reject(error);
          }
        });
      }
    });

    return newPromise;
  }
}

在這個實現中，then方法返回一個新的Promise對象。當原Promise完成或失敗時，我們調用相應的回調函數，并將結果傳遞給新的Promise。

2.5 處理異步操作

我們的Promise實現目前還不支持異步操作。為了支持異步操作，我們需要確保then方法中的回調函數在Promise狀態改變時被調用。

class MyPromise {
  // ... 之前的代碼

  then(onFulfilled, onRejected) {
    const newPromise = new MyPromise((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((value) => {
          setTimeout(() => {
            try {
              const result = onFulfilled(value);
              resolve(result);
            } catch (error) {
              reject(error);
            }
          }, 0);
        });

        this.onRejectedCallbacks.push((reason) => {
          setTimeout(() => {
            try {
              const result = onRejected(reason);
              resolve(result);
            } catch (error) {
              reject(error);
            }
          }, 0);
        });
      }
    });

    return newPromise;
  }
}

在這個實現中，我們使用setTimeout將回調函數的執行推遲到下一個事件循環中，從而確保異步操作的正確執行。

2.6 實現Promise.resolve和Promise.reject

Promise.resolve和Promise.reject是Promise類的靜態方法，用于快速創建一個已解決或已拒絕的Promise。

class MyPromise {
  // ... 之前的代碼

  static resolve(value) {
    return new MyPromise((resolve) => {
      resolve(value);
    });
  }

  static reject(reason) {
    return new MyPromise((resolve, reject) => {
      reject(reason);
    });
  }
}

2.7 實現Promise.all

Promise.all方法用于將多個Promise實例包裝成一個新的Promise實例，只有當所有Promise都成功時，新的Promise才會成功。

class MyPromise {
  // ... 之前的代碼

  static all(promises) {
    return new MyPromise((resolve, reject) => {
      const results = [];
      let completedCount = 0;

      promises.forEach((promise, index) => {
        promise.then((value) => {
          results[index] = value;
          completedCount++;

          if (completedCount === promises.length) {
            resolve(results);
          }
        }).catch((error) => {
          reject(error);
        });
      });
    });
  }
}

在這個實現中，我們遍歷所有的Promise實例，并在每個Promise成功時將其結果存儲在results數組中。當所有Promise都成功時，我們調用resolve方法。

2.8 實現Promise.race

Promise.race方法用于將多個Promise實例包裝成一個新的Promise實例，新的Promise的狀態由最先完成的Promise決定。

class MyPromise {
  // ... 之前的代碼

  static race(promises) {
    return new MyPromise((resolve, reject) => {
      promises.forEach((promise) => {
        promise.then((value) => {
          resolve(value);
        }).catch((error) => {
          reject(error);
        });
      });
    });
  }
}

在這個實現中，我們遍歷所有的Promise實例，并在第一個Promise完成時調用resolve或reject方法。

3. 測試我們的簡易Promise

現在，我們已經實現了一個簡易的Promise對象。讓我們通過一些測試用例來驗證它的正確性。

3.1 基本用法測試

const promise = new MyPromise((resolve, reject) => {
  setTimeout(() => {
    resolve('Success!');
  }, 1000);
});

promise.then((value) => {
  console.log(value); // 輸出: Success!
}).catch((error) => {
  console.error(error);
});

3.2 鏈式調用測試

const promise = new MyPromise((resolve, reject) => {
  setTimeout(() => {
    resolve(1);
  }, 1000);
});

promise.then((value) => {
  console.log(value); // 輸出: 1
  return value + 1;
}).then((value) => {
  console.log(value); // 輸出: 2
}).catch((error) => {
  console.error(error);
});

3.3 Promise.all測試

const promise1 = MyPromise.resolve(1);
const promise2 = MyPromise.resolve(2);
const promise3 = MyPromise.resolve(3);

MyPromise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values); // 輸出: [1, 2, 3]
}).catch((error) => {
  console.error(error);
});

3.4 Promise.race測試

const promise1 = new MyPromise((resolve) => {
  setTimeout(() => {
    resolve('Promise 1');
  }, 500);
});

const promise2 = new MyPromise((resolve) => {
  setTimeout(() => {
    resolve('Promise 2');
  }, 1000);
});

MyPromise.race([promise1, promise2]).then((value) => {
  console.log(value); // 輸出: Promise 1
}).catch((error) => {
  console.error(error);
});

4. 總結

通過本文，我們一步步實現了一個簡易的Promise對象。雖然這個實現并不完整，但它涵蓋了Promise的核心功能，包括狀態管理、鏈式調用、異步操作處理等。通過這個實現，我們不僅加深了對Promise的理解，還為后續學習更復雜的異步編程模式打下了堅實的基礎。

在實際開發中，JavaScript原生的Promise對象已經非常成熟和強大，建議直接使用原生Promise。但對于想要深入理解Promise內部機制的開發者來說，手動實現一個簡易的Promise是一個非常有益的練習。