兩年前端經驗還不會手寫Promise？
作者：cqhly
Promise是一種代表異步操作最終完成或失敗的對象。它是ES6中新增的語法特性，通過Promise對象，可以更加優雅地處理異步操作。Promise有三種狀態：pending（進行中）、fulfilled（已成功）和rejected（已失敗）。一旦Promise的狀態發生改變，就不會再變。
什么是promise？
當我們處理異步操作時，我們經常需要進行一系列的操作，如請求數據、處理數據、渲染UI等。在過去，這些操作通常通過回調函數來處理，但是回調函數嵌套過多會導致代碼難以維護，產生回調地獄（Callback Hell）。Promise就是一種用于解決異步編程問題的解決方案。
概念？
Promise是一種代表異步操作最終完成或失敗的對象。它是ES6中新增的語法特性，通過Promise對象，可以更加優雅地處理異步操作。Promise有三種狀態：pending（進行中）、fulfilled（已成功）和rejected（已失敗）。一旦Promise的狀態發生改變，就不會再變。
Promise的作用：
- 異步操作的管理： Promise提供了一種標準的方式來管理異步操作，使得代碼更加清晰易讀。
- 解決回調地獄問題： Promise的鏈式調用（Chaining）可以避免多層嵌套的回調函數，使代碼結構更加清晰。
- 錯誤處理： Promise提供了統一的錯誤處理機制，通過catch方法可以捕獲Promise鏈中的錯誤，避免了未捕獲的異常。
- 并行和串行執行： Promise可以串行或并行執行多個異步操作，并通過Promise.all和Promise.race等方法來管理多個Promise實例的狀態。
Promise的方法：
- then(onFulfilled, onRejected): then方法用于注冊Promise的成功和失敗回調，并返回一個新的Promise，可以實現鏈式調用。
- catch(onRejected): catch方法用于捕獲Promise鏈中的錯誤，并返回一個新的Promise，用于處理錯誤。
- finally(onFinally): finally方法用于注冊一個回調函數，無論Promise的狀態如何都會被調用。
- Promise.resolve(value): Promise.resolve方法用于將一個值包裝成Promise對象，如果參數是Promise實例，則直接返回該實例。
- Promise.reject(reason): Promise.reject方法用于返回一個狀態為rejected的Promise對象，并將指定的原因傳遞給Promise的回調函數。
- Promise.all(iterable): Promise.all方法用于將多個Promise實例包裝成一個新的Promise實例，當所有Promise實例的狀態都變為fulfilled時，新的Promise的狀態才變為fulfilled；當其中一個Promise實例的狀態變為rejected時，新的Promise的狀態就變為rejected。
- Promise.race(iterable): Promise.race方法用于將多個Promise實例包裝成一個新的Promise實例，當其中一個Promise實例的狀態發生改變時，新的Promise的狀態就跟著改變。
- Promise.allSettled(iterable): Promise.allSettled方法用于將多個Promise實例包裝成一個新的Promise實例，無論這些Promise的狀態如何，最終返回的Promise實例的狀態都會變為fulfilled，返回的結果是一個包含所有Promise的狀態和結果的數組。
實現Promise的重點
如果要手寫Promise，那就需要先理清楚重點，然后實現主，要集中在以下幾個方面：
- 狀態管理： Promise有三種狀態：pending（進行中）、fulfilled（已成功）和rejected（已失敗）。在Promise的生命周期中，它會從pending狀態轉變為fulfilled或rejected狀態，一旦狀態改變就不可再變。狀態的變化由Promise的執行器函數中的resolve和reject函數觸發。
- 鏈式調用： Promise允許通過then方法鏈式調用，每次調用then都會返回一個新的Promise實例，以實現更加靈活的異步操作。通過鏈式調用，可以串聯多個異步操作，并在每個操作完成后執行特定的處理邏輯。
- 錯誤處理： Promise提供了catch方法用于捕獲Promise鏈中的錯誤。在Promise鏈中，如果某個Promise發生了rejected狀態，它會沿著鏈路向下傳遞，直到被catch方法捕獲到錯誤，或者如果沒有捕獲到錯誤，則會導致未捕獲的異常。
- 異步執行： Promise的then方法中的回調函數會在當前執行棧執行完成后，通過事件循環機制被放入下一個事件循環中執行，這樣可以保證回調函數總是在當前代碼執行完成后執行，從而實現異步操作。
- 解決回調地獄問題： Promise的鏈式調用可以解決回調地獄（Callback Hell）的問題，使得代碼更加清晰易讀。通過Promise，可以更加優雅地處理多個異步操作的串行或并行執行，避免了深度嵌套的回調函數。
實現Promise
在知道Promise的概念以及重點之后，我們來簡單實現一下：
class MyPromise {
constructor(executor) {
// 初始化Promise的狀態為pending
this.state = 'pending';
// 存儲Promise的成功值
this.value = undefined;
// 存儲Promise的失敗原因
this.reason = undefined;
// 存儲成功狀態下的回調函數數組
this.onResolvedCallbacks = [];
// 存儲失敗狀態下的回調函數數組
this.onRejectedCallbacks = [];
// 定義resolve函數，用于將Promise狀態從pending改變為fulfilled
const resolve = value => {
if (this.state === 'pending') {
this.state = 'fulfilled';
this.value = value;
// 執行成功狀態下的回調函數數組中的每個回調函數
this.onResolvedCallbacks.forEach(callback => callback());
}
};
// 定義reject函數，用于將Promise狀態從pending改變為rejected
const reject = reason => {
if (this.state === 'pending') {
this.state = 'rejected';
this.reason = reason;
// 執行失敗狀態下的回調函數數組中的每個回調函數
this.onRejectedCallbacks.forEach(callback => callback());
}
};
try {
// 執行executor函數，并將resolve和reject函數作為參數傳遞給executor
executor(resolve, reject);
} catch (error) {
// 如果executor執行過程中發生了錯誤，則將Promise狀態改變為rejected
reject(error);
}
}
// then方法用于注冊Promise的成功和失敗回調，并返回一個新的Promise
then(onFulfilled, onRejected) {
// 創建一個新的Promise實例
const newPromise = new MyPromise((resolve, reject) => {
// 當前Promise的狀態為fulfilled時
if (this.state === 'fulfilled') {
// 異步執行onFulfilled回調函數，并處理返回值result
setTimeout(() => {
try {
const result = onFulfilled(this.value);
// 將返回值result傳遞給resolvePromise函數，處理新Promise的狀態
resolvePromise(newPromise, result, resolve, reject);
} catch (error) {
// 如果執行onFulfilled回調函數過程中發生了錯誤，則將新Promise的狀態改為rejected
reject(error);
}
}, 0);
}
// 當前Promise的狀態為rejected時
if (this.state === 'rejected') {
// 異步執行onRejected回調函數，并處理返回值result
setTimeout(() => {
try {
const result = onRejected(this.reason);
// 將返回值result傳遞給resolvePromise函數，處理新Promise的狀態
resolvePromise(newPromise, result, resolve, reject);
} catch (error) {
// 如果執行onRejected回調函數過程中發生了錯誤，則將新Promise的狀態改為rejected
reject(error);
}
}, 0);
}
// 當前Promise的狀態為pending時
if (this.state === 'pending') {
// 將成功和失敗回調函數分別添加到對應的回調函數數組中
this.onResolvedCallbacks.push(() => {
// 異步執行成功回調函數，并處理返回值result
setTimeout(() => {
try {
const result = onFulfilled(this.value);
// 將返回值result傳遞給resolvePromise函數，處理新Promise的狀態
resolvePromise(newPromise, result, resolve, reject);
} catch (error) {
// 如果執行成功回調函數過程中發生了錯誤，則將新Promise的狀態改為rejected
reject(error);
}
}, 0);
});
this.onRejectedCallbacks.push(() => {
// 異步執行失敗回調函數，并處理返回值result
setTimeout(() => {
try {
const result = onRejected(this.reason);
// 將返回值result傳遞給resolvePromise函數，處理新Promise的狀態
resolvePromise(newPromise, result, resolve, reject);
} catch (error) {
// 如果執行失敗回調函數過程中發生了錯誤，則將新Promise的狀態改為rejected
reject(error);
}
}, 0);
});
}
});
// 返回新的Promise實例
return newPromise;
}
}
// resolvePromise函數用于處理then方法中回調函數返回的結果
function resolvePromise(newPromise, result, resolve, reject) {
// 如果新的Promise和返回值是同一個對象，則拋出錯誤
if (newPromise === result) {
return reject(new TypeError('Chaining cycle detected for promise'));
}
// 如果返回值是Promise實例，則等待該Promise的狀態改變，并根據其狀態決定新Promise的狀態
if (result instanceof MyPromise) {
result.then(resolve, reject);
} else {
// 如果返回值不是Promise實例，則將返回值傳遞給resolve函數，將新Promise的狀態改變為fulfilled
resolve(result);
}
}這段代碼實現了一個非常基礎的Promise，主要有以下幾個部分：
- 構造函數：
構造函數接受一個執行器函數作為參數，在構造函數內部定義了resolve和reject函數，并執行了執行器函數。執行器函數接受兩個參數，分別是resolve和reject，它們分別用于將Promise狀態從pending改變為fulfilled和rejected。
執行器函數中通過try...catch塊捕獲可能的異常，并在捕獲到異常時將Promise狀態改變為rejected。
- then方法：
then方法用于注冊Promise的成功和失敗回調，并返回一個新的Promise。它接受兩個參數，分別是成功回調onFulfilled和失敗回調onRejected。
在then方法內部，根據當前Promise的狀態（pending、fulfilled、rejected），分別處理執行成功和執行失敗的邏輯，并在異步環境下使用setTimeout確保執行順序。
如果then方法中的回調函數返回了一個Promise，則等待該Promise的狀態改變，并根據其狀態決定新的Promise的狀態。
resolvePromise函數：
resolvePromise函數用于處理then方法中回調函數返回的結果。如果結果是一個Promise，則等待該Promise的狀態改變，并根據其狀態決定新的Promise的狀態。
責任編輯：武曉燕
來源：
海燕技術棧
