方法全解析：從并發(fā)控制到錯(cuò)誤處理實(shí)踐)
1. 項(xiàng)目概述為什么我們需要深入理解Promise如果你寫過JavaScript尤其是處理過異步操作那你一定繞不開Promise。它早已不是ES6時(shí)代的新鮮玩意兒而是現(xiàn)代前端開發(fā)的基石。但說實(shí)話我見過太多開發(fā)者包括一些工作兩三年的朋友對(duì)Promise的理解還停留在“.then能拿到結(jié)果.catch能捕獲錯(cuò)誤”的層面。當(dāng)面試官問到“Promise.all和Promise.allSettled有什么區(qū)別”或者“如何實(shí)現(xiàn)一個(gè)Promise.race”時(shí)往往就卡殼了。這其實(shí)挺危險(xiǎn)的。Promise不僅僅是語(yǔ)法糖它是一套完整的異步編程模型。理解不透徹寫出來的代碼就容易埋下隱患——比如內(nèi)存泄漏、未處理的Promise拒絕就是那個(gè)煩人的“Uncaught (in promise)”錯(cuò)誤、或者并發(fā)控制不當(dāng)導(dǎo)致頁(yè)面卡頓。我接手過不少遺留項(xiàng)目里面充斥著層層嵌套的.then和混亂的錯(cuò)誤處理維護(hù)起來簡(jiǎn)直是一場(chǎng)噩夢(mèng)。所以我決定寫這篇東西。這不是一篇簡(jiǎn)單的API文檔翻譯而是把我這些年踩過的坑、總結(jié)的最佳實(shí)踐以及那些面試?？?、工作中必用的九個(gè)核心靜態(tài)方法all, race, allSettled, any, resolve, reject, try, withResolvers掰開揉碎了講給你聽。我們會(huì)從最基礎(chǔ)的“Promise是什么”聊起深入到每個(gè)方法的特性、返回值、使用場(chǎng)景和那些容易翻車的細(xì)節(jié)。目標(biāo)是讓你讀完以后不僅能應(yīng)付面試更能寫出健壯、優(yōu)雅的異步代碼。2. Promise核心概念與狀態(tài)機(jī)理解“承諾”的本質(zhì)在深入方法之前我們必須把Promise的“心法”搞清楚。很多人用Promise卻不知道它內(nèi)部是怎么運(yùn)轉(zhuǎn)的這就好比開車不懂發(fā)動(dòng)機(jī)原理平路還好一到復(fù)雜路況就容易熄火。2.1 Promise的三種狀態(tài)與不可逆性一個(gè)Promise對(duì)象只可能處于三種狀態(tài)之一待定Pending初始狀態(tài)既沒有被兌現(xiàn)也沒有被拒絕。已兌現(xiàn)Fulfilled意味著操作成功完成。此時(shí)Promise會(huì)有一個(gè)不可變的兌現(xiàn)值Fulfillment Value。已拒絕Rejected意味著操作失敗。此時(shí)Promise會(huì)有一個(gè)不可變的拒絕原因Rejection Reason。這里最關(guān)鍵的兩個(gè)詞是“不可變Immutable”和“不可逆”。一旦狀態(tài)從Pending變?yōu)镕ulfilled或Rejected它就再也不會(huì)改變了并且這個(gè)結(jié)果值或原因也會(huì)被永久固定下來。這是Promise可靠性的基石。你可以把它想象成一份法律合同。合同簽訂后Pending最終要么執(zhí)行成功Fulfilled拿到約定的報(bào)酬Value要么執(zhí)行失敗Rejected并附上違約的理由Reason。合同一旦執(zhí)行完畢結(jié)果就無法更改了。2.2 Thenable鏈與微任務(wù)隊(duì)列Promise的.then()、.catch()和.finally()方法會(huì)返回一個(gè)新的Promise。這正是鏈?zhǔn)秸{(diào)用的基礎(chǔ)。但更重要的是這些回調(diào)函數(shù)不是立即執(zhí)行的它們會(huì)被排入一個(gè)叫做**微任務(wù)隊(duì)列Microtask Queue**的地方。注意微任務(wù)隊(duì)列的優(yōu)先級(jí)高于瀏覽器渲染和宏任務(wù)如setTimeout、事件回調(diào)。這意味著在一個(gè)事件循環(huán)中所有同步代碼執(zhí)行完后會(huì)清空整個(gè)微任務(wù)隊(duì)列然后才進(jìn)行渲染或執(zhí)行下一個(gè)宏任務(wù)。這個(gè)機(jī)制保證了Promise回調(diào)的及時(shí)性也是實(shí)現(xiàn)一些精細(xì)異步控制的關(guān)鍵。console.log(腳本開始); // 1. 同步任務(wù) Promise.resolve().then(() { console.log(Promise 1 回調(diào)); // 3. 微任務(wù) }); setTimeout(() { console.log(setTimeout 回調(diào)); // 4. 宏任務(wù) }, 0); console.log(腳本結(jié)束); // 2. 同步任務(wù) // 輸出順序腳本開始 - 腳本結(jié)束 - Promise 1 回調(diào) - setTimeout 回調(diào)理解這個(gè)執(zhí)行順序?qū)τ谡{(diào)試異步代碼的時(shí)序問題至關(guān)重要。2.3 錯(cuò)誤處理的“冒泡”機(jī)制Promise的錯(cuò)誤處理有一個(gè)非常強(qiáng)大的特性穿透Propagation。如果一個(gè)Promise被拒絕并且在其鏈上沒有對(duì)應(yīng)的.catch()處理程序這個(gè)拒絕狀態(tài)會(huì)一直向下傳遞直到被捕獲為止。如果始終沒被捕獲在瀏覽器中就會(huì)導(dǎo)致“Uncaught (in promise) Error”的警告。Promise.reject(new Error(出錯(cuò)了)) .then(() console.log(這里不會(huì)執(zhí)行)) .then(() console.log(這里也不會(huì)執(zhí)行)) .catch(err console.error(錯(cuò)誤在這里被捕獲, err)); // 錯(cuò)誤會(huì)“冒泡”到這里這個(gè)機(jī)制讓我們可以像使用try...catch一樣在異步調(diào)用鏈的末尾統(tǒng)一處理錯(cuò)誤讓代碼更清晰。但這也要求我們必須有意識(shí)地添加錯(cuò)誤處理否則就是埋雷。3. 核心靜態(tài)方法一并發(fā)控制四巨頭——all, race, allSettled, any這四位是處理多個(gè)Promise并發(fā)場(chǎng)景的“四大天王”功能強(qiáng)大但各有脾性用錯(cuò)了場(chǎng)景效果大打折扣。3.1 Promise.all全部成功否則失敗使用場(chǎng)景當(dāng)你需要等待多個(gè)獨(dú)立的異步操作全部完成并且這些操作的結(jié)果相互依賴后續(xù)邏輯需要所有結(jié)果時(shí)。例如同時(shí)請(qǐng)求用戶信息、訂單列表和消息通知等所有數(shù)據(jù)都拿到后再渲染頁(yè)面。特性與返回值接收一個(gè)可迭代對(duì)象通常是Promise數(shù)組。返回一個(gè)新的Promise。只有所有輸入的Promise都成功兌現(xiàn)返回的Promise才會(huì)以數(shù)組形式兌現(xiàn)數(shù)組元素順序與輸入順序嚴(yán)格一致。如果其中任何一個(gè)Promise被拒絕則返回的Promise會(huì)立即拒絕拒絕原因?yàn)榈谝粋€(gè)被拒絕的Promise的原因。這就是所謂的“快速失敗Fail-fast”。const p1 Promise.resolve(1); const p2 Promise.resolve(2); const p3 Promise.reject(new Error(第三個(gè)失敗了)); Promise.all([p1, p2, p3]) .then(results console.log(results)) // 不會(huì)執(zhí)行 .catch(err console.error(捕獲到錯(cuò)誤, err.message)); // 輸出捕獲到錯(cuò)誤 第三個(gè)失敗了 // 成功案例 Promise.all([p1, p2]) .then(([result1, result2]) { // 使用解構(gòu)賦值 console.log(結(jié)果1: ${result1}, 結(jié)果2: ${result2}); // 輸出結(jié)果1: 1, 結(jié)果2: 2 });實(shí)操心得與避坑指南注意輸入類型Promise.all的參數(shù)可以是任何可迭代對(duì)象不一定是數(shù)組。如果傳入非Promise值它會(huì)用Promise.resolve()進(jìn)行包裝?！翱焖偈 钡母弊饔眠@是優(yōu)點(diǎn)也是缺點(diǎn)。優(yōu)點(diǎn)是能第一時(shí)間發(fā)現(xiàn)錯(cuò)誤缺點(diǎn)是如果其他Promise還在執(zhí)行比如網(wǎng)絡(luò)請(qǐng)求它們不會(huì)被取消可能會(huì)繼續(xù)消耗資源并在后臺(tái)完成或失敗只是結(jié)果被忽略了。在需要確保所有操作都嘗試完成的場(chǎng)景如批量提交這可能不是最佳選擇。內(nèi)存考慮如果并發(fā)量極大比如上萬(wàn)個(gè)PromisePromise.all會(huì)同時(shí)發(fā)起所有請(qǐng)求可能導(dǎo)致內(nèi)存激增或觸發(fā)瀏覽器并發(fā)限制。此時(shí)需要考慮分片chunk處理。3.2 Promise.race誰(shuí)快聽誰(shuí)的使用場(chǎng)景為異步操作設(shè)置超時(shí)或者從多個(gè)冗余數(shù)據(jù)源中獲取數(shù)據(jù)取最先返回的那個(gè)。例如從主服務(wù)器和備用服務(wù)器同時(shí)請(qǐng)求同一份數(shù)據(jù)用先返回的結(jié)果。特性與返回值接收一個(gè)可迭代對(duì)象。返回一個(gè)新的Promise。這個(gè)Promise的最終狀態(tài)兌現(xiàn)或拒絕與第一個(gè)敲定Settled即非Pending狀態(tài)的輸入Promise的狀態(tài)完全相同并采用其值或原因。// 超時(shí)控制經(jīng)典模式 function fetchWithTimeout(url, timeout 5000) { const fetchPromise fetch(url); const timeoutPromise new Promise((_, reject) { setTimeout(() reject(new Error(請(qǐng)求超時(shí))), timeout); }); return Promise.race([fetchPromise, timeoutPromise]); } fetchWithTimeout(https://api.example.com/data) .then(response response.json()) .then(data console.log(data)) .catch(err console.error(請(qǐng)求失敗或超時(shí), err));實(shí)操心得與避坑指南“落敗者”的命運(yùn)和Promise.all一樣其他“跑得慢”的Promise并不會(huì)被取消或停止。它們會(huì)繼續(xù)執(zhí)行直到完成只是其結(jié)果被忽略了。如果這些操作有副作用如寫入數(shù)據(jù)庫(kù)需要額外小心。小心“立即敲定”的Promise如果傳入的數(shù)組中包含一個(gè)已經(jīng)拒絕的Promise比如Promise.reject(...)那么Promise.race幾乎會(huì)立即拒絕因?yàn)橐粋€(gè)已敲定的Promise就是“最快的”。這在組合使用時(shí)需要留意。不是“競(jìng)速成功”Promise.race只認(rèn)第一個(gè)敲定的無論成功還是失敗。如果你需要的是“第一個(gè)成功的”那應(yīng)該用Promise.any。3.3 Promise.allSettled悉數(shù)匯報(bào)不論成敗使用場(chǎng)景ES2020引入。當(dāng)你需要知道所有異步操作最終的結(jié)果無論每個(gè)操作是成功還是失敗時(shí)。典型場(chǎng)景是批量操作后的結(jié)果匯總報(bào)告比如同時(shí)向多個(gè)API發(fā)送監(jiān)控?cái)?shù)據(jù)需要知道每個(gè)發(fā)送是否成功而不是一個(gè)失敗就全盤放棄。特性與返回值接收一個(gè)可迭代對(duì)象。永遠(yuǎn)不會(huì)拒絕。它會(huì)等待所有輸入的Promise都敲定Settled。返回一個(gè)Promise其兌現(xiàn)值是一個(gè)對(duì)象數(shù)組。每個(gè)對(duì)象描述一個(gè)輸入Promise的最終結(jié)果。每個(gè)結(jié)果對(duì)象都有一個(gè)status屬性值為fulfilled或rejected。如果status為fulfilled則對(duì)象會(huì)有一個(gè)value屬性包含兌現(xiàn)值。如果status為rejected則對(duì)象會(huì)有一個(gè)reason屬性包含拒絕原因。const promises [ Promise.resolve(成功1), Promise.reject(new Error(失敗1)), Promise.resolve(成功2), ]; Promise.allSettled(promises) .then(results { console.log(所有操作已完成); results.forEach((result, index) { if (result.status fulfilled) { console.log( 操作 ${index}: 成功值 ${result.value}); } else { console.log( 操作 ${index}: 失敗原因 ${result.reason.message}); } }); // 可以進(jìn)一步處理過濾出成功的或記錄所有失敗 const successfulOps results.filter(r r.status fulfilled); const failedOps results.filter(r r.status rejected); });實(shí)操心得與避坑指南與Promise.all的核心區(qū)別all是“一損俱損”allSettled是“各自為政匯總上報(bào)”。在需要確保所有操作都執(zhí)行完畢的場(chǎng)景下allSettled是更安全的選擇。結(jié)果處理由于返回格式固定處理起來非常結(jié)構(gòu)化。你可以輕松地統(tǒng)計(jì)成功/失敗數(shù)量或?qū)κ〉牟僮鬟M(jìn)行重試。兼容性雖然現(xiàn)在主流環(huán)境都支持但如果需要支持非常老的瀏覽器或Node.js版本可能需要polyfill。3.4 Promise.any取第一個(gè)成功的使用場(chǎng)景ES2021引入。當(dāng)你需要多個(gè)操作中的任何一個(gè)成功即可并且你只關(guān)心成功的那個(gè)結(jié)果。如果所有操作都失敗你才認(rèn)為整體失敗。典型例子是從多個(gè)CDN源或鏡像服務(wù)器加載一個(gè)資源用第一個(gè)可用的。特性與返回值接收一個(gè)可迭代對(duì)象。返回一個(gè)新的Promise。只要有一個(gè)輸入的Promise成功兌現(xiàn)返回的Promise就會(huì)立即以該成功值兌現(xiàn)。如果所有輸入的Promise都被拒絕則返回的Promise會(huì)以一個(gè)特殊的AggregateError拒絕該錯(cuò)誤的errors屬性包含了所有輸入Promise的拒絕原因數(shù)組。const primarySource fetch(https://primary.cdn.com/asset.js).catch(() { throw new Error(主源失敗) }); const backupSource1 fetch(https://backup1.cdn.com/asset.js).catch(() { throw new Error(備份源1失敗) }); const backupSource2 fetch(https://backup2.cdn.com/asset.js).catch(() { throw new Error(備份源2失敗) }); Promise.any([primarySource, backupSource1, backupSource2]) .then(response { console.log(資源加載成功來自, response.url); return response.text(); }) .catch(err { // 如果全部失敗err是一個(gè)AggregateError console.error(所有源都失敗了); if (err instanceof AggregateError) { err.errors.forEach((e, i) console.error( 錯(cuò)誤${i}: ${e.message})); } });實(shí)操心得與避坑指南與Promise.race的對(duì)比這是最容易混淆的一對(duì)。race是“第一個(gè)出結(jié)果的無論成敗”any是“第一個(gè)成功的”。在超時(shí)場(chǎng)景用race在多源擇優(yōu)場(chǎng)景用any?？諗?shù)組或全為拒絕如果傳入空數(shù)組或者所有Promise都立即拒絕Promise.any會(huì)同步返回一個(gè)被拒絕的Promise拒絕原因?yàn)锳ggregateError。AggregateError處理這是JavaScript新的內(nèi)置錯(cuò)誤類型。在處理Promise.any的失敗時(shí)記得檢查錯(cuò)誤類型以便訪問所有失敗原因這對(duì)于調(diào)試非常有用。4. 核心靜態(tài)方法二工具與工廠方法除了處理并發(fā)的“四大天王”Promise還提供了一些用于創(chuàng)建和包裝的靜態(tài)方法它們像工具箱里的螺絲刀雖小但不可或缺。4.1 Promise.resolve 與 Promise.reject快速創(chuàng)建這兩個(gè)方法用于快速創(chuàng)建一個(gè)狀態(tài)已確定的Promise。Promise.resolve(value)創(chuàng)建一個(gè)以給定值兌現(xiàn)的Promise。如果value本身就是一個(gè)Promise則直接返回這個(gè)Promise行為類似于Promise.resolve(Promise.resolve(x))返回一個(gè)兌現(xiàn)為x的Promise。如果value是一個(gè)thenable對(duì)象即具有.then方法的對(duì)象則會(huì)“展開unwrap”它。Promise.reject(reason)創(chuàng)建一個(gè)以給定原因拒絕的Promise。// 快速創(chuàng)建已解決的Promise常用于起始值或測(cè)試 const cachedData Promise.resolve({ name: 緩存數(shù)據(jù) }); // 統(tǒng)一接口返回Promise function getData(id) { if (!id) { // 快速返回一個(gè)拒絕的Promise比 throw 更適用于異步函數(shù)上下文 return Promise.reject(new Error(ID不能為空)); } return fetch(/api/data/${id}); } // Promise.resolve 展開 thenable const thenable { then: function(onFulfill, onReject) { onFulfill(來自thenable的值); } }; Promise.resolve(thenable).then(val console.log(val)); // 輸出來自thenable的值實(shí)操心得Promise.resolve()常用于將同步值或第三方thenable庫(kù)如jQuery的Deferred轉(zhuǎn)換為標(biāo)準(zhǔn)的ES6 Promise保證接口一致性。在異步函數(shù)async function中return Promise.reject(err)和throw err效果幾乎一樣但前者在某些鏈?zhǔn)秸{(diào)用中意圖更明確。4.2 Promise.try同步異常的異步化處理這是一個(gè)目前處于ECMAScript提案階段Stage 3的方法但思想非常重要并且有流行的polyfill如Bluebird庫(kù)。它的目的是讓一個(gè)可能拋出同步異常的函數(shù)安全地在Promise上下文中啟動(dòng)。為什么需要它考慮以下代碼function riskyOperation(data) { if (!data) { throw new Error(數(shù)據(jù)無效); // 同步拋出錯(cuò)誤 } return doAsyncWork(data); // 返回一個(gè)Promise } // 錯(cuò)誤寫法同步錯(cuò)誤無法被.catch捕獲 Promise.resolve() .then(() riskyOperation(null)) .catch(err console.error(捕獲不到同步錯(cuò)誤, err)); // 這里的.catch抓不到上面的throw // 傳統(tǒng)解決方式用try...catch包裝 Promise.resolve() .then(() { try { return riskyOperation(null); } catch (err) { return Promise.reject(err); // 將同步錯(cuò)誤轉(zhuǎn)換為Promise拒絕 } }) .catch(err console.error(現(xiàn)在能捕獲了, err));Promise.try或類似的實(shí)現(xiàn)就是為了簡(jiǎn)化這個(gè)模式// 假設(shè)有 Promise.try Promise.try(() riskyOperation(null)) .then(result console.log(result)) .catch(err console.error(同步和異步錯(cuò)誤都能在這里捕獲, err)); // 統(tǒng)一錯(cuò)誤處理核心價(jià)值它保證了傳遞給它的函數(shù)中的所有異常無論是同步throw還是異步reject都能被Promise鏈末端的.catch()捕獲實(shí)現(xiàn)了錯(cuò)誤處理的真正統(tǒng)一。雖然原生API還未完全支持但理解這個(gè)模式對(duì)于編寫健壯的異步代碼至關(guān)重要。在實(shí)踐中你可以自己寫一個(gè)簡(jiǎn)單的try包裝函數(shù)或者使用提供了此功能的工具庫(kù)。4.3 Promise.withResolvers更靈活的手動(dòng)控制這是ES2024新增的一個(gè)非常實(shí)用的靜態(tài)方法。它解決了一個(gè)特定場(chǎng)景的問題當(dāng)你需要在Promise構(gòu)造函數(shù)外部比如在事件回調(diào)中控制Promise的決議resolve或reject時(shí)。傳統(tǒng)的new Promise((resolve, reject) { ... })模式resolve和reject函數(shù)被限定在構(gòu)造函數(shù)執(zhí)行器內(nèi)部。Promise.withResolvers將它們“提取”出來返回一個(gè)包含promise、resolve、reject三個(gè)屬性的對(duì)象。使用場(chǎng)景將基于回調(diào)的API或事件驅(qū)動(dòng)API轉(zhuǎn)換為Promise時(shí)特別有用。// 傳統(tǒng)方式將事件監(jiān)聽轉(zhuǎn)換為Promise代碼嵌套在executor內(nèi) function waitForEvent(element, eventType) { return new Promise((resolve, reject) { const handler (event) { element.removeEventListener(eventType, handler); resolve(event); }; element.addEventListener(eventType, handler); // 如果想支持超時(shí)拒絕reject的邏輯也需要寫在這里比較臃腫 }); } // 使用 Promise.withResolvers邏輯更清晰控制權(quán)外露 function waitForEventWithResolvers(element, eventType, timeoutMs) { const { promise, resolve, reject } Promise.withResolvers(); const eventHandler (event) { cleanup(); resolve(event); }; const timeoutId timeoutMs ? setTimeout(() { cleanup(); reject(new Error(等待事件超時(shí))); }, timeoutMs) : null; function cleanup() { element.removeEventListener(eventType, eventHandler); if (timeoutId) clearTimeout(timeoutId); } element.addEventListener(eventType, eventHandler); return promise; // 注意resolve和reject被“捕獲”在閉包中外部無法直接訪問保證了安全。 } // 使用 const button document.getElementById(myButton); waitForEventWithResolvers(button, click, 3000) .then(event console.log(按鈕被點(diǎn)擊了, event)) .catch(err console.error(出錯(cuò)或超時(shí), err));實(shí)操心得分離關(guān)注點(diǎn)它允許你將Promise的創(chuàng)建、事件監(jiān)聽綁定、超時(shí)設(shè)置等邏輯分離開使代碼更模塊化、易讀。謹(jǐn)慎使用因?yàn)閞esolve和reject函數(shù)被暴露在更廣的作用域你需要確保它們不會(huì)被誤調(diào)用或多次調(diào)用。通常建議像上面例子一樣將它們封裝在一個(gè)函數(shù)內(nèi)部避免泄漏到全局。并非替代new Promise對(duì)于簡(jiǎn)單的、一次性執(zhí)行的異步任務(wù)new Promise依然是最直接的方式。withResolvers更適合需要將決議控制權(quán)“掛起”并在未來某個(gè)由外部事件觸發(fā)的場(chǎng)景。5. 鏈?zhǔn)秸{(diào)用、錯(cuò)誤處理與性能陷阱掌握了靜態(tài)方法我們?cè)賮砩钊肟纯碢romise鏈?zhǔn)秸{(diào)用的細(xì)節(jié)和那些容易踩的坑。5.1 Then、Catch、Finally的返回值詳解這是Promise鏈能運(yùn)轉(zhuǎn)起來的核心規(guī)則必須了然于胸。.then(onFulfilled, onRejected)它返回一個(gè)新的Promise記作P2。如果onFulfilled或onRejected函數(shù)返回一個(gè)值x則P2以該值x兌現(xiàn)。拋出一個(gè)異常e則P2以該異常e為原因拒絕。返回一個(gè)Promisep則P2將“跟隨”這個(gè)Promisep即P2的狀態(tài)和值/原因?qū)⑴cp保持一致。如果.then中沒有提供對(duì)應(yīng)的回調(diào)例如Promise被拒絕但未提供onRejected那么P2的狀態(tài)和值/原因?qū)⒅苯印按┩浮钡较乱粋€(gè)鏈中的Promise。.catch(onRejected)本質(zhì)上是.then(null, onRejected)或.then(undefined, onRejected)的語(yǔ)法糖。所有關(guān)于.then的返回值規(guī)則都適用于.catch。.finally(onFinally)它也會(huì)返回一個(gè)新的Promise。onFinally回調(diào)函數(shù)不接收任何參數(shù)它不知道Promise是成功還是失敗。onFinally函數(shù)如果返回一個(gè)Promise則會(huì)等待該P(yáng)romise完成。最關(guān)鍵的一點(diǎn).finally返回的Promise其最終狀態(tài)和值/原因通常與調(diào)用它的原Promise保持一致除非在onFinally回調(diào)中拋出了錯(cuò)誤或返回了一個(gè)被拒絕的Promise。Promise.resolve(原始值) .then(val { console.log(val); // 原始值 return val 經(jīng)過then加工; // 返回一個(gè)值新Promise以此值兌現(xiàn) }) .then(newVal { console.log(newVal); // 原始值 經(jīng)過then加工 return Promise.resolve(來自另一個(gè)Promise的值); // 返回一個(gè)Promise新Promise跟隨它 }) .then(val { console.log(val); // 來自另一個(gè)Promise的值 throw new Error(主動(dòng)拋出錯(cuò)誤); // 拋出異常新Promise以此拒絕 }) .catch(err { console.error(捕獲錯(cuò)誤, err.message); // 主動(dòng)拋出錯(cuò)誤 return 從錯(cuò)誤中恢復(fù)的值; // 在catch中返回一個(gè)值鏈將恢復(fù) }) .finally(() { console.log(無論成功失敗finally都會(huì)執(zhí)行); // 這里如果拋出錯(cuò)誤會(huì)覆蓋前面的結(jié)果 // throw new Error(Finally里的錯(cuò)誤); // 取消注釋試試 }) .then(finalVal { console.log(最終值, finalVal); // 從錯(cuò)誤中恢復(fù)的值 });5.2 常見錯(cuò)誤模式與最佳實(shí)踐Promise地獄嵌套then// 壞味道 getData().then(a { processA(a).then(b { processB(b).then(c { console.log(c); }); }); }); // 正確扁平化鏈?zhǔn)秸{(diào)用 getData() .then(a processA(a)) .then(b processB(b)) .then(c console.log(c));忘記返回Promise// 錯(cuò)誤第二個(gè)then接收到的undefined getData() .then(data { // 這里執(zhí)行了一個(gè)異步操作但沒有return saveToDB(data); // saveToDB返回一個(gè)Promise }) .then(result { console.log(result); // undefined }); // 正確 getData() .then(data { return saveToDB(data); // 必須return }) .then(result console.log(保存成功ID, result.id));在Promise構(gòu)造函數(shù)中忘記調(diào)用resolve/reject 這會(huì)導(dǎo)致Promise永遠(yuǎn)處于Pending狀態(tài)引發(fā)內(nèi)存泄漏和程序邏輯停滯。// 危險(xiǎn) const promise new Promise((resolve, reject) { doAsyncWork((err, data) { if (err) { // 糟糕這里只寫了console.log沒有調(diào)用reject console.error(err); } else { resolve(data); } }); });混合使用async/await和傳統(tǒng)Promise鏈雖然可以混用但風(fēng)格不一致會(huì)降低可讀性。通常建議在一個(gè)項(xiàng)目或模塊中保持一致風(fēng)格。5.3 性能考量與內(nèi)存泄漏鏈過長(zhǎng)過長(zhǎng)的Promise鏈雖然不會(huì)像回調(diào)地獄那樣難以閱讀但每個(gè).then都會(huì)創(chuàng)建微任務(wù)。如果鏈非常長(zhǎng)比如成千上萬(wàn)個(gè)可能會(huì)輕微影響性能。對(duì)于需要循環(huán)大量異步操作的情況考慮使用async/await配合循環(huán)或者使用專門的異步控制流庫(kù)。未處理的Promise拒絕這是最常見的“內(nèi)存泄漏”和Bug來源之一。一個(gè)被拒絕但未被捕獲的Promise其關(guān)聯(lián)的錯(cuò)誤和上下文可能無法被垃圾回收。務(wù)必為Promise鏈添加最終的.catch()處理或者在頂級(jí)使用window.addEventListener(unhandledrejection, ...)瀏覽器環(huán)境或process.on(unhandledRejection, ...)Node.js環(huán)境來捕獲全局未處理的拒絕。閉包引用在Promise回調(diào)或執(zhí)行器中如果引用了外部的大對(duì)象或DOM元素即使Promise已完成這些引用也可能被保持導(dǎo)致內(nèi)存無法釋放。確保在不再需要時(shí)解除引用例如將變量置為null。6. 實(shí)戰(zhàn)從面試題看Promise深度理解理論說再多不如來幾道經(jīng)典的、有代表性的題目練練手。這些題目能很好地檢驗(yàn)?zāi)闶欠裾嬲斫饬薖romise的微任務(wù)、事件循環(huán)和鏈?zhǔn)絺鞑C(jī)制。6.1 題目一基礎(chǔ)執(zhí)行順序console.log(script start); setTimeout(function() { console.log(setTimeout); }, 0); Promise.resolve().then(function() { console.log(promise1); }).then(function() { console.log(promise2); }); console.log(script end);輸出順序script start-script end-promise1-promise2-setTimeout解析同步代碼最先執(zhí)行。setTimeout是宏任務(wù)其回調(diào)被放入任務(wù)隊(duì)列。Promise.resolve().then(...)將兩個(gè)微任務(wù)放入微任務(wù)隊(duì)列。同步代碼執(zhí)行完畢后事件循環(huán)會(huì)清空整個(gè)微任務(wù)隊(duì)列所以promise1和promise2連續(xù)輸出然后才會(huì)從宏任務(wù)隊(duì)列中取出下一個(gè)任務(wù)執(zhí)行setTimeout。6.2 題目二混合async/awaitasync function async1() { console.log(async1 start); await async2(); console.log(async1 end); } async function async2() { console.log(async2); } console.log(script start); setTimeout(function() { console.log(setTimeout); }, 0); async1(); new Promise(function(resolve) { console.log(promise1); resolve(); }).then(function() { console.log(promise2); }); console.log(script end);輸出順序script start-async1 start-async2-promise1-script end-async1 end-promise2-setTimeout解析關(guān)鍵點(diǎn)在于await async2();。await之后的代碼console.log(async1 end)相當(dāng)于被包裝到了async2()返回的Promise的.then()回調(diào)里成了一個(gè)微任務(wù)。所以在同步代碼執(zhí)行完后微任務(wù)隊(duì)列里有async1 end和promise2。它們按被加入隊(duì)列的順序依次執(zhí)行。6.3 題目三Promise鏈的返回值Promise.resolve() .then(() { console.log(1); return Promise.resolve(2); // 注意這里返回了一個(gè)Promise }) .then(res { console.log(res); }); Promise.resolve() .then(() { console.log(3); }) .then(() { console.log(4); }) .then(() { console.log(5); }) .then(() { console.log(6); });輸出順序1-3-4-2-5-6解析這道題有點(diǎn)刁鉆核心在于**return Promise.resolve(2)會(huì)產(chǎn)生額外的微任務(wù)**。根據(jù)ECMAScript規(guī)范當(dāng)一個(gè)Promise的onFulfilled處理程序返回一個(gè)thenable包括Promise時(shí)需要額外的步驟來“解析resolve”這個(gè)thenable這會(huì)導(dǎo)致至少一個(gè)額外的微任務(wù)延遲。第一個(gè)鏈輸出1然后返回Promise.resolve(2)這引入了一個(gè)額外的微任務(wù)我們叫它microtask-X來等待這個(gè)Promise敲定。第二個(gè)鏈同步輸出3然后4。此時(shí)microtask-X完成了它讓第一個(gè)鏈的第二個(gè).then可以執(zhí)行輸出2。接著第二個(gè)鏈繼續(xù)輸出5和6。6.4 手寫實(shí)現(xiàn)Promise.all的要點(diǎn)面試中常要求手寫Promise.all這考察了對(duì)Promise狀態(tài)、迭代器和并發(fā)控制的理解。Promise.myAll function(iterable) { // 1. 參數(shù)校驗(yàn)與轉(zhuǎn)換 const promises Array.from(iterable); // 將可迭代對(duì)象轉(zhuǎn)為數(shù)組 const results new Array(promises.length); let completedCount 0; // 2. 處理空數(shù)組情況 if (promises.length 0) { return Promise.resolve([]); } // 3. 返回一個(gè)新的Promise return new Promise((resolve, reject) { promises.forEach((promise, index) { // 4. 用Promise.resolve包裝確保處理的是Promise Promise.resolve(promise) .then(value { // 5. 按順序存儲(chǔ)結(jié)果 results[index] value; completedCount; // 6. 只有當(dāng)所有都完成時(shí)才resolve最終結(jié)果數(shù)組 if (completedCount promises.length) { resolve(results); } }) .catch(reason { // 7. 任何一個(gè)失敗立即reject快速失敗 reject(reason); }); }); }); }; // 測(cè)試 const p1 Promise.resolve(1); const p2 2; // 非Promise值 const p3 new Promise((resolve) setTimeout(() resolve(3), 100)); Promise.myAll([p1, p2, p3]) .then(results console.log(results)) // [1, 2, 3] .catch(err console.error(err));手寫要點(diǎn)處理非Promise輸入使用Promise.resolve()包裝每個(gè)元素這是Promise.all的規(guī)范行為。保持結(jié)果順序利用閉包和索引index確保結(jié)果數(shù)組的順序與輸入順序一致無論各個(gè)Promise完成的先后?？焖偈C(jī)制在任何一個(gè)Promise拒絕時(shí)立即調(diào)用外層的reject并傳入該拒絕原因。計(jì)數(shù)器判斷完成使用計(jì)數(shù)器completedCount來判斷是否所有Promise都已兌現(xiàn)比檢查results數(shù)組的每個(gè)元素更高效。邊界條件處理空數(shù)組輸入應(yīng)直接返回一個(gè)已兌現(xiàn)的空數(shù)組Promise。理解并能手寫這些核心方法意味著你對(duì)Promise的運(yùn)行機(jī)制有了扎實(shí)的掌握不再是停留在表面API的調(diào)用者了。 JavaScript Promise核心靜態(tài)方法全解析：從并發(fā)控制到錯(cuò)誤處理實(shí)踐
1. 項(xiàng)目概述為什么我們需要深入理解Promise如果你寫過JavaScript尤其是處理過異步操作那你一定繞不開Promise。它早已不是ES6時(shí)代的新鮮玩意兒而是現(xiàn)代前端開發(fā)的基石。但說實(shí)話我見過太多開發(fā)者包括一些工作兩三年的朋友對(duì)Promise的理解還停留在“.then能拿到結(jié)果.catch能捕獲錯(cuò)誤”的層面。當(dāng)面試官問到“Promise.all和Promise.allSettled有什么區(qū)別”或者“如何實(shí)現(xiàn)一個(gè)Promise.race”時(shí)往往就卡殼了。這其實(shí)挺危險(xiǎn)的。Promise不僅僅是語(yǔ)法糖它是一套完整的異步編程模型。理解不透徹寫出來的代碼就容易埋下隱患——比如內(nèi)存泄漏、未處理的Promise拒絕就是那個(gè)煩人的“Uncaught (in promise)”錯(cuò)誤、或者并發(fā)控制不當(dāng)導(dǎo)致頁(yè)面卡頓。我接手過不少遺留項(xiàng)目里面充斥著層層嵌套的.then和混亂的錯(cuò)誤處理維護(hù)起來簡(jiǎn)直是一場(chǎng)噩夢(mèng)。所以我決定寫這篇東西。這不是一篇簡(jiǎn)單的API文檔翻譯而是把我這些年踩過的坑、總結(jié)的最佳實(shí)踐以及那些面試?？?、工作中必用的九個(gè)核心靜態(tài)方法all, race, allSettled, any, resolve, reject, try, withResolvers掰開揉碎了講給你聽。我們會(huì)從最基礎(chǔ)的“Promise是什么”聊起深入到每個(gè)方法的特性、返回值、使用場(chǎng)景和那些容易翻車的細(xì)節(jié)。目標(biāo)是讓你讀完以后不僅能應(yīng)付面試更能寫出健壯、優(yōu)雅的異步代碼。2. Promise核心概念與狀態(tài)機(jī)理解“承諾”的本質(zhì)在深入方法之前我們必須把Promise的“心法”搞清楚。很多人用Promise卻不知道它內(nèi)部是怎么運(yùn)轉(zhuǎn)的這就好比開車不懂發(fā)動(dòng)機(jī)原理平路還好一到復(fù)雜路況就容易熄火。2.1 Promise的三種狀態(tài)與不可逆性一個(gè)Promise對(duì)象只可能處于三種狀態(tài)之一待定Pending初始狀態(tài)既沒有被兌現(xiàn)也沒有被拒絕。已兌現(xiàn)Fulfilled意味著操作成功完成。此時(shí)Promise會(huì)有一個(gè)不可變的兌現(xiàn)值Fulfillment Value。已拒絕Rejected意味著操作失敗。此時(shí)Promise會(huì)有一個(gè)不可變的拒絕原因Rejection Reason。這里最關(guān)鍵的兩個(gè)詞是“不可變Immutable”和“不可逆”。一旦狀態(tài)從Pending變?yōu)镕ulfilled或Rejected它就再也不會(huì)改變了并且這個(gè)結(jié)果值或原因也會(huì)被永久固定下來。這是Promise可靠性的基石。你可以把它想象成一份法律合同。合同簽訂后Pending最終要么執(zhí)行成功Fulfilled拿到約定的報(bào)酬Value要么執(zhí)行失敗Rejected并附上違約的理由Reason。合同一旦執(zhí)行完畢結(jié)果就無法更改了。2.2 Thenable鏈與微任務(wù)隊(duì)列Promise的.then()、.catch()和.finally()方法會(huì)返回一個(gè)新的Promise。這正是鏈?zhǔn)秸{(diào)用的基礎(chǔ)。但更重要的是這些回調(diào)函數(shù)不是立即執(zhí)行的它們會(huì)被排入一個(gè)叫做**微任務(wù)隊(duì)列Microtask Queue**的地方。注意微任務(wù)隊(duì)列的優(yōu)先級(jí)高于瀏覽器渲染和宏任務(wù)如setTimeout、事件回調(diào)。這意味著在一個(gè)事件循環(huán)中所有同步代碼執(zhí)行完后會(huì)清空整個(gè)微任務(wù)隊(duì)列然后才進(jìn)行渲染或執(zhí)行下一個(gè)宏任務(wù)。這個(gè)機(jī)制保證了Promise回調(diào)的及時(shí)性也是實(shí)現(xiàn)一些精細(xì)異步控制的關(guān)鍵。console.log(腳本開始); // 1. 同步任務(wù) Promise.resolve().then(() { console.log(Promise 1 回調(diào)); // 3. 微任務(wù) }); setTimeout(() { console.log(setTimeout 回調(diào)); // 4. 宏任務(wù) }, 0); console.log(腳本結(jié)束); // 2. 同步任務(wù) // 輸出順序腳本開始 - 腳本結(jié)束 - Promise 1 回調(diào) - setTimeout 回調(diào)理解這個(gè)執(zhí)行順序?qū)τ谡{(diào)試異步代碼的時(shí)序問題至關(guān)重要。2.3 錯(cuò)誤處理的“冒泡”機(jī)制Promise的錯(cuò)誤處理有一個(gè)非常強(qiáng)大的特性穿透Propagation。如果一個(gè)Promise被拒絕并且在其鏈上沒有對(duì)應(yīng)的.catch()處理程序這個(gè)拒絕狀態(tài)會(huì)一直向下傳遞直到被捕獲為止。如果始終沒被捕獲在瀏覽器中就會(huì)導(dǎo)致“Uncaught (in promise) Error”的警告。Promise.reject(new Error(出錯(cuò)了)) .then(() console.log(這里不會(huì)執(zhí)行)) .then(() console.log(這里也不會(huì)執(zhí)行)) .catch(err console.error(錯(cuò)誤在這里被捕獲, err)); // 錯(cuò)誤會(huì)“冒泡”到這里這個(gè)機(jī)制讓我們可以像使用try...catch一樣在異步調(diào)用鏈的末尾統(tǒng)一處理錯(cuò)誤讓代碼更清晰。但這也要求我們必須有意識(shí)地添加錯(cuò)誤處理否則就是埋雷。3. 核心靜態(tài)方法一并發(fā)控制四巨頭——all, race, allSettled, any這四位是處理多個(gè)Promise并發(fā)場(chǎng)景的“四大天王”功能強(qiáng)大但各有脾性用錯(cuò)了場(chǎng)景效果大打折扣。3.1 Promise.all全部成功否則失敗使用場(chǎng)景當(dāng)你需要等待多個(gè)獨(dú)立的異步操作全部完成并且這些操作的結(jié)果相互依賴后續(xù)邏輯需要所有結(jié)果時(shí)。例如同時(shí)請(qǐng)求用戶信息、訂單列表和消息通知等所有數(shù)據(jù)都拿到后再渲染頁(yè)面。特性與返回值接收一個(gè)可迭代對(duì)象通常是Promise數(shù)組。返回一個(gè)新的Promise。只有所有輸入的Promise都成功兌現(xiàn)返回的Promise才會(huì)以數(shù)組形式兌現(xiàn)數(shù)組元素順序與輸入順序嚴(yán)格一致。如果其中任何一個(gè)Promise被拒絕則返回的Promise會(huì)立即拒絕拒絕原因?yàn)榈谝粋€(gè)被拒絕的Promise的原因。這就是所謂的“快速失敗Fail-fast”。const p1 Promise.resolve(1); const p2 Promise.resolve(2); const p3 Promise.reject(new Error(第三個(gè)失敗了)); Promise.all([p1, p2, p3]) .then(results console.log(results)) // 不會(huì)執(zhí)行 .catch(err console.error(捕獲到錯(cuò)誤, err.message)); // 輸出捕獲到錯(cuò)誤 第三個(gè)失敗了 // 成功案例 Promise.all([p1, p2]) .then(([result1, result2]) { // 使用解構(gòu)賦值 console.log(結(jié)果1: ${result1}, 結(jié)果2: ${result2}); // 輸出結(jié)果1: 1, 結(jié)果2: 2 });實(shí)操心得與避坑指南注意輸入類型Promise.all的參數(shù)可以是任何可迭代對(duì)象不一定是數(shù)組。如果傳入非Promise值它會(huì)用Promise.resolve()進(jìn)行包裝?！翱焖偈 钡母弊饔眠@是優(yōu)點(diǎn)也是缺點(diǎn)。優(yōu)點(diǎn)是能第一時(shí)間發(fā)現(xiàn)錯(cuò)誤缺點(diǎn)是如果其他Promise還在執(zhí)行比如網(wǎng)絡(luò)請(qǐng)求它們不會(huì)被取消可能會(huì)繼續(xù)消耗資源并在后臺(tái)完成或失敗只是結(jié)果被忽略了。在需要確保所有操作都嘗試完成的場(chǎng)景如批量提交這可能不是最佳選擇。內(nèi)存考慮如果并發(fā)量極大比如上萬(wàn)個(gè)PromisePromise.all會(huì)同時(shí)發(fā)起所有請(qǐng)求可能導(dǎo)致內(nèi)存激增或觸發(fā)瀏覽器并發(fā)限制。此時(shí)需要考慮分片chunk處理。3.2 Promise.race誰(shuí)快聽誰(shuí)的使用場(chǎng)景為異步操作設(shè)置超時(shí)或者從多個(gè)冗余數(shù)據(jù)源中獲取數(shù)據(jù)取最先返回的那個(gè)。例如從主服務(wù)器和備用服務(wù)器同時(shí)請(qǐng)求同一份數(shù)據(jù)用先返回的結(jié)果。特性與返回值接收一個(gè)可迭代對(duì)象。返回一個(gè)新的Promise。這個(gè)Promise的最終狀態(tài)兌現(xiàn)或拒絕與第一個(gè)敲定Settled即非Pending狀態(tài)的輸入Promise的狀態(tài)完全相同并采用其值或原因。// 超時(shí)控制經(jīng)典模式 function fetchWithTimeout(url, timeout 5000) { const fetchPromise fetch(url); const timeoutPromise new Promise((_, reject) { setTimeout(() reject(new Error(請(qǐng)求超時(shí))), timeout); }); return Promise.race([fetchPromise, timeoutPromise]); } fetchWithTimeout(https://api.example.com/data) .then(response response.json()) .then(data console.log(data)) .catch(err console.error(請(qǐng)求失敗或超時(shí), err));實(shí)操心得與避坑指南“落敗者”的命運(yùn)和Promise.all一樣其他“跑得慢”的Promise并不會(huì)被取消或停止。它們會(huì)繼續(xù)執(zhí)行直到完成只是其結(jié)果被忽略了。如果這些操作有副作用如寫入數(shù)據(jù)庫(kù)需要額外小心。小心“立即敲定”的Promise如果傳入的數(shù)組中包含一個(gè)已經(jīng)拒絕的Promise比如Promise.reject(...)那么Promise.race幾乎會(huì)立即拒絕因?yàn)橐粋€(gè)已敲定的Promise就是“最快的”。這在組合使用時(shí)需要留意。不是“競(jìng)速成功”Promise.race只認(rèn)第一個(gè)敲定的無論成功還是失敗。如果你需要的是“第一個(gè)成功的”那應(yīng)該用Promise.any。3.3 Promise.allSettled悉數(shù)匯報(bào)不論成敗使用場(chǎng)景ES2020引入。當(dāng)你需要知道所有異步操作最終的結(jié)果無論每個(gè)操作是成功還是失敗時(shí)。典型場(chǎng)景是批量操作后的結(jié)果匯總報(bào)告比如同時(shí)向多個(gè)API發(fā)送監(jiān)控?cái)?shù)據(jù)需要知道每個(gè)發(fā)送是否成功而不是一個(gè)失敗就全盤放棄。特性與返回值接收一個(gè)可迭代對(duì)象。永遠(yuǎn)不會(huì)拒絕。它會(huì)等待所有輸入的Promise都敲定Settled。返回一個(gè)Promise其兌現(xiàn)值是一個(gè)對(duì)象數(shù)組。每個(gè)對(duì)象描述一個(gè)輸入Promise的最終結(jié)果。每個(gè)結(jié)果對(duì)象都有一個(gè)status屬性值為fulfilled或rejected。如果status為fulfilled則對(duì)象會(huì)有一個(gè)value屬性包含兌現(xiàn)值。如果status為rejected則對(duì)象會(huì)有一個(gè)reason屬性包含拒絕原因。const promises [ Promise.resolve(成功1), Promise.reject(new Error(失敗1)), Promise.resolve(成功2), ]; Promise.allSettled(promises) .then(results { console.log(所有操作已完成); results.forEach((result, index) { if (result.status fulfilled) { console.log( 操作 ${index}: 成功值 ${result.value}); } else { console.log( 操作 ${index}: 失敗原因 ${result.reason.message}); } }); // 可以進(jìn)一步處理過濾出成功的或記錄所有失敗 const successfulOps results.filter(r r.status fulfilled); const failedOps results.filter(r r.status rejected); });實(shí)操心得與避坑指南與Promise.all的核心區(qū)別all是“一損俱損”allSettled是“各自為政匯總上報(bào)”。在需要確保所有操作都執(zhí)行完畢的場(chǎng)景下allSettled是更安全的選擇。結(jié)果處理由于返回格式固定處理起來非常結(jié)構(gòu)化。你可以輕松地統(tǒng)計(jì)成功/失敗數(shù)量或?qū)κ〉牟僮鬟M(jìn)行重試。兼容性雖然現(xiàn)在主流環(huán)境都支持但如果需要支持非常老的瀏覽器或Node.js版本可能需要polyfill。3.4 Promise.any取第一個(gè)成功的使用場(chǎng)景ES2021引入。當(dāng)你需要多個(gè)操作中的任何一個(gè)成功即可并且你只關(guān)心成功的那個(gè)結(jié)果。如果所有操作都失敗你才認(rèn)為整體失敗。典型例子是從多個(gè)CDN源或鏡像服務(wù)器加載一個(gè)資源用第一個(gè)可用的。特性與返回值接收一個(gè)可迭代對(duì)象。返回一個(gè)新的Promise。只要有一個(gè)輸入的Promise成功兌現(xiàn)返回的Promise就會(huì)立即以該成功值兌現(xiàn)。如果所有輸入的Promise都被拒絕則返回的Promise會(huì)以一個(gè)特殊的AggregateError拒絕該錯(cuò)誤的errors屬性包含了所有輸入Promise的拒絕原因數(shù)組。const primarySource fetch(https://primary.cdn.com/asset.js).catch(() { throw new Error(主源失敗) }); const backupSource1 fetch(https://backup1.cdn.com/asset.js).catch(() { throw new Error(備份源1失敗) }); const backupSource2 fetch(https://backup2.cdn.com/asset.js).catch(() { throw new Error(備份源2失敗) }); Promise.any([primarySource, backupSource1, backupSource2]) .then(response { console.log(資源加載成功來自, response.url); return response.text(); }) .catch(err { // 如果全部失敗err是一個(gè)AggregateError console.error(所有源都失敗了); if (err instanceof AggregateError) { err.errors.forEach((e, i) console.error( 錯(cuò)誤${i}: ${e.message})); } });實(shí)操心得與避坑指南與Promise.race的對(duì)比這是最容易混淆的一對(duì)。race是“第一個(gè)出結(jié)果的無論成敗”any是“第一個(gè)成功的”。在超時(shí)場(chǎng)景用race在多源擇優(yōu)場(chǎng)景用any?？諗?shù)組或全為拒絕如果傳入空數(shù)組或者所有Promise都立即拒絕Promise.any會(huì)同步返回一個(gè)被拒絕的Promise拒絕原因?yàn)锳ggregateError。AggregateError處理這是JavaScript新的內(nèi)置錯(cuò)誤類型。在處理Promise.any的失敗時(shí)記得檢查錯(cuò)誤類型以便訪問所有失敗原因這對(duì)于調(diào)試非常有用。4. 核心靜態(tài)方法二工具與工廠方法除了處理并發(fā)的“四大天王”Promise還提供了一些用于創(chuàng)建和包裝的靜態(tài)方法它們像工具箱里的螺絲刀雖小但不可或缺。4.1 Promise.resolve 與 Promise.reject快速創(chuàng)建這兩個(gè)方法用于快速創(chuàng)建一個(gè)狀態(tài)已確定的Promise。Promise.resolve(value)創(chuàng)建一個(gè)以給定值兌現(xiàn)的Promise。如果value本身就是一個(gè)Promise則直接返回這個(gè)Promise行為類似于Promise.resolve(Promise.resolve(x))返回一個(gè)兌現(xiàn)為x的Promise。如果value是一個(gè)thenable對(duì)象即具有.then方法的對(duì)象則會(huì)“展開unwrap”它。Promise.reject(reason)創(chuàng)建一個(gè)以給定原因拒絕的Promise。// 快速創(chuàng)建已解決的Promise常用于起始值或測(cè)試 const cachedData Promise.resolve({ name: 緩存數(shù)據(jù) }); // 統(tǒng)一接口返回Promise function getData(id) { if (!id) { // 快速返回一個(gè)拒絕的Promise比 throw 更適用于異步函數(shù)上下文 return Promise.reject(new Error(ID不能為空)); } return fetch(/api/data/${id}); } // Promise.resolve 展開 thenable const thenable { then: function(onFulfill, onReject) { onFulfill(來自thenable的值); } }; Promise.resolve(thenable).then(val console.log(val)); // 輸出來自thenable的值實(shí)操心得Promise.resolve()常用于將同步值或第三方thenable庫(kù)如jQuery的Deferred轉(zhuǎn)換為標(biāo)準(zhǔn)的ES6 Promise保證接口一致性。在異步函數(shù)async function中return Promise.reject(err)和throw err效果幾乎一樣但前者在某些鏈?zhǔn)秸{(diào)用中意圖更明確。4.2 Promise.try同步異常的異步化處理這是一個(gè)目前處于ECMAScript提案階段Stage 3的方法但思想非常重要并且有流行的polyfill如Bluebird庫(kù)。它的目的是讓一個(gè)可能拋出同步異常的函數(shù)安全地在Promise上下文中啟動(dòng)。為什么需要它考慮以下代碼function riskyOperation(data) { if (!data) { throw new Error(數(shù)據(jù)無效); // 同步拋出錯(cuò)誤 } return doAsyncWork(data); // 返回一個(gè)Promise } // 錯(cuò)誤寫法同步錯(cuò)誤無法被.catch捕獲 Promise.resolve() .then(() riskyOperation(null)) .catch(err console.error(捕獲不到同步錯(cuò)誤, err)); // 這里的.catch抓不到上面的throw // 傳統(tǒng)解決方式用try...catch包裝 Promise.resolve() .then(() { try { return riskyOperation(null); } catch (err) { return Promise.reject(err); // 將同步錯(cuò)誤轉(zhuǎn)換為Promise拒絕 } }) .catch(err console.error(現(xiàn)在能捕獲了, err));Promise.try或類似的實(shí)現(xiàn)就是為了簡(jiǎn)化這個(gè)模式// 假設(shè)有 Promise.try Promise.try(() riskyOperation(null)) .then(result console.log(result)) .catch(err console.error(同步和異步錯(cuò)誤都能在這里捕獲, err)); // 統(tǒng)一錯(cuò)誤處理核心價(jià)值它保證了傳遞給它的函數(shù)中的所有異常無論是同步throw還是異步reject都能被Promise鏈末端的.catch()捕獲實(shí)現(xiàn)了錯(cuò)誤處理的真正統(tǒng)一。雖然原生API還未完全支持但理解這個(gè)模式對(duì)于編寫健壯的異步代碼至關(guān)重要。在實(shí)踐中你可以自己寫一個(gè)簡(jiǎn)單的try包裝函數(shù)或者使用提供了此功能的工具庫(kù)。4.3 Promise.withResolvers更靈活的手動(dòng)控制這是ES2024新增的一個(gè)非常實(shí)用的靜態(tài)方法。它解決了一個(gè)特定場(chǎng)景的問題當(dāng)你需要在Promise構(gòu)造函數(shù)外部比如在事件回調(diào)中控制Promise的決議resolve或reject時(shí)。傳統(tǒng)的new Promise((resolve, reject) { ... })模式resolve和reject函數(shù)被限定在構(gòu)造函數(shù)執(zhí)行器內(nèi)部。Promise.withResolvers將它們“提取”出來返回一個(gè)包含promise、resolve、reject三個(gè)屬性的對(duì)象。使用場(chǎng)景將基于回調(diào)的API或事件驅(qū)動(dòng)API轉(zhuǎn)換為Promise時(shí)特別有用。// 傳統(tǒng)方式將事件監(jiān)聽轉(zhuǎn)換為Promise代碼嵌套在executor內(nèi) function waitForEvent(element, eventType) { return new Promise((resolve, reject) { const handler (event) { element.removeEventListener(eventType, handler); resolve(event); }; element.addEventListener(eventType, handler); // 如果想支持超時(shí)拒絕reject的邏輯也需要寫在這里比較臃腫 }); } // 使用 Promise.withResolvers邏輯更清晰控制權(quán)外露 function waitForEventWithResolvers(element, eventType, timeoutMs) { const { promise, resolve, reject } Promise.withResolvers(); const eventHandler (event) { cleanup(); resolve(event); }; const timeoutId timeoutMs ? setTimeout(() { cleanup(); reject(new Error(等待事件超時(shí))); }, timeoutMs) : null; function cleanup() { element.removeEventListener(eventType, eventHandler); if (timeoutId) clearTimeout(timeoutId); } element.addEventListener(eventType, eventHandler); return promise; // 注意resolve和reject被“捕獲”在閉包中外部無法直接訪問保證了安全。 } // 使用 const button document.getElementById(myButton); waitForEventWithResolvers(button, click, 3000) .then(event console.log(按鈕被點(diǎn)擊了, event)) .catch(err console.error(出錯(cuò)或超時(shí), err));實(shí)操心得分離關(guān)注點(diǎn)它允許你將Promise的創(chuàng)建、事件監(jiān)聽綁定、超時(shí)設(shè)置等邏輯分離開使代碼更模塊化、易讀。謹(jǐn)慎使用因?yàn)閞esolve和reject函數(shù)被暴露在更廣的作用域你需要確保它們不會(huì)被誤調(diào)用或多次調(diào)用。通常建議像上面例子一樣將它們封裝在一個(gè)函數(shù)內(nèi)部避免泄漏到全局。并非替代new Promise對(duì)于簡(jiǎn)單的、一次性執(zhí)行的異步任務(wù)new Promise依然是最直接的方式。withResolvers更適合需要將決議控制權(quán)“掛起”并在未來某個(gè)由外部事件觸發(fā)的場(chǎng)景。5. 鏈?zhǔn)秸{(diào)用、錯(cuò)誤處理與性能陷阱掌握了靜態(tài)方法我們?cè)賮砩钊肟纯碢romise鏈?zhǔn)秸{(diào)用的細(xì)節(jié)和那些容易踩的坑。5.1 Then、Catch、Finally的返回值詳解這是Promise鏈能運(yùn)轉(zhuǎn)起來的核心規(guī)則必須了然于胸。.then(onFulfilled, onRejected)它返回一個(gè)新的Promise記作P2。如果onFulfilled或onRejected函數(shù)返回一個(gè)值x則P2以該值x兌現(xiàn)。拋出一個(gè)異常e則P2以該異常e為原因拒絕。返回一個(gè)Promisep則P2將“跟隨”這個(gè)Promisep即P2的狀態(tài)和值/原因?qū)⑴cp保持一致。如果.then中沒有提供對(duì)應(yīng)的回調(diào)例如Promise被拒絕但未提供onRejected那么P2的狀態(tài)和值/原因?qū)⒅苯印按┩浮钡较乱粋€(gè)鏈中的Promise。.catch(onRejected)本質(zhì)上是.then(null, onRejected)或.then(undefined, onRejected)的語(yǔ)法糖。所有關(guān)于.then的返回值規(guī)則都適用于.catch。.finally(onFinally)它也會(huì)返回一個(gè)新的Promise。onFinally回調(diào)函數(shù)不接收任何參數(shù)它不知道Promise是成功還是失敗。onFinally函數(shù)如果返回一個(gè)Promise則會(huì)等待該P(yáng)romise完成。最關(guān)鍵的一點(diǎn).finally返回的Promise其最終狀態(tài)和值/原因通常與調(diào)用它的原Promise保持一致除非在onFinally回調(diào)中拋出了錯(cuò)誤或返回了一個(gè)被拒絕的Promise。Promise.resolve(原始值) .then(val { console.log(val); // 原始值 return val 經(jīng)過then加工; // 返回一個(gè)值新Promise以此值兌現(xiàn) }) .then(newVal { console.log(newVal); // 原始值 經(jīng)過then加工 return Promise.resolve(來自另一個(gè)Promise的值); // 返回一個(gè)Promise新Promise跟隨它 }) .then(val { console.log(val); // 來自另一個(gè)Promise的值 throw new Error(主動(dòng)拋出錯(cuò)誤); // 拋出異常新Promise以此拒絕 }) .catch(err { console.error(捕獲錯(cuò)誤, err.message); // 主動(dòng)拋出錯(cuò)誤 return 從錯(cuò)誤中恢復(fù)的值; // 在catch中返回一個(gè)值鏈將恢復(fù) }) .finally(() { console.log(無論成功失敗finally都會(huì)執(zhí)行); // 這里如果拋出錯(cuò)誤會(huì)覆蓋前面的結(jié)果 // throw new Error(Finally里的錯(cuò)誤); // 取消注釋試試 }) .then(finalVal { console.log(最終值, finalVal); // 從錯(cuò)誤中恢復(fù)的值 });5.2 常見錯(cuò)誤模式與最佳實(shí)踐Promise地獄嵌套then// 壞味道 getData().then(a { processA(a).then(b { processB(b).then(c { console.log(c); }); }); }); // 正確扁平化鏈?zhǔn)秸{(diào)用 getData() .then(a processA(a)) .then(b processB(b)) .then(c console.log(c));忘記返回Promise// 錯(cuò)誤第二個(gè)then接收到的undefined getData() .then(data { // 這里執(zhí)行了一個(gè)異步操作但沒有return saveToDB(data); // saveToDB返回一個(gè)Promise }) .then(result { console.log(result); // undefined }); // 正確 getData() .then(data { return saveToDB(data); // 必須return }) .then(result console.log(保存成功ID, result.id));在Promise構(gòu)造函數(shù)中忘記調(diào)用resolve/reject 這會(huì)導(dǎo)致Promise永遠(yuǎn)處于Pending狀態(tài)引發(fā)內(nèi)存泄漏和程序邏輯停滯。// 危險(xiǎn) const promise new Promise((resolve, reject) { doAsyncWork((err, data) { if (err) { // 糟糕這里只寫了console.log沒有調(diào)用reject console.error(err); } else { resolve(data); } }); });混合使用async/await和傳統(tǒng)Promise鏈雖然可以混用但風(fēng)格不一致會(huì)降低可讀性。通常建議在一個(gè)項(xiàng)目或模塊中保持一致風(fēng)格。5.3 性能考量與內(nèi)存泄漏鏈過長(zhǎng)過長(zhǎng)的Promise鏈雖然不會(huì)像回調(diào)地獄那樣難以閱讀但每個(gè).then都會(huì)創(chuàng)建微任務(wù)。如果鏈非常長(zhǎng)比如成千上萬(wàn)個(gè)可能會(huì)輕微影響性能。對(duì)于需要循環(huán)大量異步操作的情況考慮使用async/await配合循環(huán)或者使用專門的異步控制流庫(kù)。未處理的Promise拒絕這是最常見的“內(nèi)存泄漏”和Bug來源之一。一個(gè)被拒絕但未被捕獲的Promise其關(guān)聯(lián)的錯(cuò)誤和上下文可能無法被垃圾回收。務(wù)必為Promise鏈添加最終的.catch()處理或者在頂級(jí)使用window.addEventListener(unhandledrejection, ...)瀏覽器環(huán)境或process.on(unhandledRejection, ...)Node.js環(huán)境來捕獲全局未處理的拒絕。閉包引用在Promise回調(diào)或執(zhí)行器中如果引用了外部的大對(duì)象或DOM元素即使Promise已完成這些引用也可能被保持導(dǎo)致內(nèi)存無法釋放。確保在不再需要時(shí)解除引用例如將變量置為null。6. 實(shí)戰(zhàn)從面試題看Promise深度理解理論說再多不如來幾道經(jīng)典的、有代表性的題目練練手。這些題目能很好地檢驗(yàn)?zāi)闶欠裾嬲斫饬薖romise的微任務(wù)、事件循環(huán)和鏈?zhǔn)絺鞑C(jī)制。6.1 題目一基礎(chǔ)執(zhí)行順序console.log(script start); setTimeout(function() { console.log(setTimeout); }, 0); Promise.resolve().then(function() { console.log(promise1); }).then(function() { console.log(promise2); }); console.log(script end);輸出順序script start-script end-promise1-promise2-setTimeout解析同步代碼最先執(zhí)行。setTimeout是宏任務(wù)其回調(diào)被放入任務(wù)隊(duì)列。Promise.resolve().then(...)將兩個(gè)微任務(wù)放入微任務(wù)隊(duì)列。同步代碼執(zhí)行完畢后事件循環(huán)會(huì)清空整個(gè)微任務(wù)隊(duì)列所以promise1和promise2連續(xù)輸出然后才會(huì)從宏任務(wù)隊(duì)列中取出下一個(gè)任務(wù)執(zhí)行setTimeout。6.2 題目二混合async/awaitasync function async1() { console.log(async1 start); await async2(); console.log(async1 end); } async function async2() { console.log(async2); } console.log(script start); setTimeout(function() { console.log(setTimeout); }, 0); async1(); new Promise(function(resolve) { console.log(promise1); resolve(); }).then(function() { console.log(promise2); }); console.log(script end);輸出順序script start-async1 start-async2-promise1-script end-async1 end-promise2-setTimeout解析關(guān)鍵點(diǎn)在于await async2();。await之后的代碼console.log(async1 end)相當(dāng)于被包裝到了async2()返回的Promise的.then()回調(diào)里成了一個(gè)微任務(wù)。所以在同步代碼執(zhí)行完后微任務(wù)隊(duì)列里有async1 end和promise2。它們按被加入隊(duì)列的順序依次執(zhí)行。6.3 題目三Promise鏈的返回值Promise.resolve() .then(() { console.log(1); return Promise.resolve(2); // 注意這里返回了一個(gè)Promise }) .then(res { console.log(res); }); Promise.resolve() .then(() { console.log(3); }) .then(() { console.log(4); }) .then(() { console.log(5); }) .then(() { console.log(6); });輸出順序1-3-4-2-5-6解析這道題有點(diǎn)刁鉆核心在于**return Promise.resolve(2)會(huì)產(chǎn)生額外的微任務(wù)**。根據(jù)ECMAScript規(guī)范當(dāng)一個(gè)Promise的onFulfilled處理程序返回一個(gè)thenable包括Promise時(shí)需要額外的步驟來“解析resolve”這個(gè)thenable這會(huì)導(dǎo)致至少一個(gè)額外的微任務(wù)延遲。第一個(gè)鏈輸出1然后返回Promise.resolve(2)這引入了一個(gè)額外的微任務(wù)我們叫它microtask-X來等待這個(gè)Promise敲定。第二個(gè)鏈同步輸出3然后4。此時(shí)microtask-X完成了它讓第一個(gè)鏈的第二個(gè).then可以執(zhí)行輸出2。接著第二個(gè)鏈繼續(xù)輸出5和6。6.4 手寫實(shí)現(xiàn)Promise.all的要點(diǎn)面試中常要求手寫Promise.all這考察了對(duì)Promise狀態(tài)、迭代器和并發(fā)控制的理解。Promise.myAll function(iterable) { // 1. 參數(shù)校驗(yàn)與轉(zhuǎn)換 const promises Array.from(iterable); // 將可迭代對(duì)象轉(zhuǎn)為數(shù)組 const results new Array(promises.length); let completedCount 0; // 2. 處理空數(shù)組情況 if (promises.length 0) { return Promise.resolve([]); } // 3. 返回一個(gè)新的Promise return new Promise((resolve, reject) { promises.forEach((promise, index) { // 4. 用Promise.resolve包裝確保處理的是Promise Promise.resolve(promise) .then(value { // 5. 按順序存儲(chǔ)結(jié)果 results[index] value; completedCount; // 6. 只有當(dāng)所有都完成時(shí)才resolve最終結(jié)果數(shù)組 if (completedCount promises.length) { resolve(results); } }) .catch(reason { // 7. 任何一個(gè)失敗立即reject快速失敗 reject(reason); }); }); }); }; // 測(cè)試 const p1 Promise.resolve(1); const p2 2; // 非Promise值 const p3 new Promise((resolve) setTimeout(() resolve(3), 100)); Promise.myAll([p1, p2, p3]) .then(results console.log(results)) // [1, 2, 3] .catch(err console.error(err));手寫要點(diǎn)處理非Promise輸入使用Promise.resolve()包裝每個(gè)元素這是Promise.all的規(guī)范行為。保持結(jié)果順序利用閉包和索引index確保結(jié)果數(shù)組的順序與輸入順序一致無論各個(gè)Promise完成的先后?？焖偈C(jī)制在任何一個(gè)Promise拒絕時(shí)立即調(diào)用外層的reject并傳入該拒絕原因。計(jì)數(shù)器判斷完成使用計(jì)數(shù)器completedCount來判斷是否所有Promise都已兌現(xiàn)比檢查results數(shù)組的每個(gè)元素更高效。邊界條件處理空數(shù)組輸入應(yīng)直接返回一個(gè)已兌現(xiàn)的空數(shù)組Promise。理解并能手寫這些核心方法意味著你對(duì)Promise的運(yùn)行機(jī)制有了扎實(shí)的掌握不再是停留在表面API的調(diào)用者了。