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