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