前言
在 JavaScript 開(kāi)發(fā)者的日常中,這樣的對(duì)話(huà)時(shí)常發(fā)生:
- ???? 新人:"為什么頁(yè)面突然白屏了?"
- ???? 老人:"異步請(qǐng)求沒(méi)做錯(cuò)誤處理吧?"
「async/await 看似優(yōu)雅的語(yǔ)法糖背后,隱藏著一個(gè)關(guān)鍵問(wèn)題:錯(cuò)誤處理策略的抉擇」。
在 JavaScript 中使用 async/await
時(shí),很多人會(huì)問(wèn):「“必須使用 try/catch 嗎?”」
其實(shí)答案并非絕對(duì),而是取決于你如何設(shè)計(jì)錯(cuò)誤處理策略和代碼風(fēng)格。
接下來(lái),我們將探討 async/await 的錯(cuò)誤處理機(jī)制、使用 try/catch 的優(yōu)勢(shì),以及其他可選的錯(cuò)誤處理方法。
async/await 的基本原理
異步代碼的進(jìn)化史
// 回調(diào)地獄時(shí)代
fetchData(url1, (data1) => {
process(data1, (result1) => {
fetchData(url2, (data2) => {
// 更多嵌套...
})
})
})
// Promise 時(shí)代
fetchData(url1)
.then(process)
.then(() => fetchData(url2))
.catch(handleError)
// async/await 時(shí)代
async function workflow() {
const data1 = await fetchData(url1)
const result = await process(data1)
return await fetchData(url2)
}
async/await 是基于 「Promise 的語(yǔ)法糖」,它使異步代碼看起來(lái)「更像同步代碼」,從而更易讀、易寫(xiě)。一個(gè) async 函數(shù)總是返回一個(gè) Promise,你可以在該函數(shù)內(nèi)部使用 await 來(lái)等待異步操作完成。
如果在異步操作中「出現(xiàn)錯(cuò)誤」(例如網(wǎng)絡(luò)請(qǐng)求失?。?,該錯(cuò)誤會(huì)使 Promise 「進(jìn)入 rejected 狀態(tài)」。
async function fetchData() {
const response = await fetch("https://api.example.com/data");
const data = await response.json();
return data;
}
使用 try/catch 捕獲錯(cuò)誤
打個(gè)比喻,就好比「鐵路信號(hào)系統(tǒng)」
想象 async 函數(shù)是一列高速行駛的列車(chē):
- 「await 是軌道切換器」:控制代碼執(zhí)行流向
- 「未捕獲的錯(cuò)誤如同脫軌事故」:會(huì)沿著鐵路網(wǎng)(調(diào)用棧)逆向傳播
- 「try/catch 是智能防護(hù)系統(tǒng)」:
- 自動(dòng)觸發(fā)緊急制動(dòng)(錯(cuò)誤捕獲)
- 啟動(dòng)備用軌道(錯(cuò)誤恢復(fù)邏輯)
- 向調(diào)度中心發(fā)送警報(bào)(錯(cuò)誤日志)
為了優(yōu)雅地捕獲 async/await 中出現(xiàn)的錯(cuò)誤,通常我們會(huì)使用 try/catch 語(yǔ)句。這種方式「可以在同一個(gè)代碼塊中捕獲同步和異步拋出的錯(cuò)誤」,使得錯(cuò)誤處理邏輯更集中、直觀。
- 代碼邏輯集中,錯(cuò)誤處理與業(yè)務(wù)邏輯緊密結(jié)合。
- 可以捕獲多個(gè) await 操作中拋出的錯(cuò)誤。
- 適合需要在出錯(cuò)時(shí)進(jìn)行統(tǒng)一處理或恢復(fù)操作的場(chǎng)景。
async function fetchData() {
try {
const response = await fetch("https://api.example.com/data");
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
return data;
} catch (error) {
console.error("Error fetching data:", error);
// 根據(jù)需要,可以在此處處理錯(cuò)誤,或者重新拋出以便上層捕獲
throw error;
}
}
不使用 try/catch 的替代方案
雖然 try/catch 是最直觀的錯(cuò)誤處理方式,但你也可以不在 async 函數(shù)內(nèi)部使用它,而是「在調(diào)用該 async 函數(shù)時(shí)捕獲錯(cuò)誤」。
「在 Promise 鏈末尾添加 .catch()
」
async function fetchData() {
const response = await fetch("https://api.example.com/data");
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json();
}
// 調(diào)用處使用 Promise.catch 捕獲錯(cuò)誤
fetchData()
.then(data => {
console.log("Data:", data);
})
.catch(error => {
console.error("Error fetching data:", error);
});
這種方式將錯(cuò)誤處理邏輯移至函數(shù)調(diào)用方,適用于以下場(chǎng)景:
- 當(dāng)多個(gè)調(diào)用者希望以不同方式處理錯(cuò)誤時(shí)。
- 希望讓 async 函數(shù)保持簡(jiǎn)潔,將錯(cuò)誤處理交給全局統(tǒng)一的錯(cuò)誤處理器(例如在 React 應(yīng)用中可以使用 Error Boundary)。
「將 await
與 catch
結(jié)合」
async function fetchData() {
const response = await fetch('https://api.example.com/data').catch(error => {
console.error('Request failed:', error);
return null; // 返回兜底值
});
if (!response) return;
// 繼續(xù)處理 response...
}
「全局錯(cuò)誤監(jiān)聽(tīng)(慎用,適合兜底)」
// 瀏覽器端全局監(jiān)聽(tīng)
window.addEventListener('unhandledrejection', event => {
event.preventDefault();
sendErrorLog({
type: 'UNHANDLED_REJECTION',
error: event.reason,
stack: event.reason.stack
});
showErrorToast('系統(tǒng)異常,請(qǐng)聯(lián)系管理員');
});
// Node.js 進(jìn)程管理
process.on('unhandledRejection', (reason, promise) => {
logger.fatal('未處理的 Promise 拒絕:', reason);
process.exitCode = 1;
});
錯(cuò)誤處理策略矩陣
決策樹(shù)分析
是否可恢復(fù)錯(cuò)誤致命錯(cuò)誤批量操作需要立即處理錯(cuò)誤? 使用 try/catch 錯(cuò)誤類(lèi)型 Promise.catch 全局監(jiān)聽(tīng) Promise.allSettled
錯(cuò)誤處理體系
- 「基礎(chǔ)層」:80% 的異步操作使用 try/catch + 類(lèi)型檢查
- 「中間層」:15% 的通用錯(cuò)誤使用全局?jǐn)r截 + 日志上報(bào)
- 「戰(zhàn)略層」:5% 的關(guān)鍵操作實(shí)現(xiàn)自動(dòng)恢復(fù)機(jī)制
小結(jié)
我的觀點(diǎn)是:「不強(qiáng)制要求,但強(qiáng)烈推薦」
- 「不強(qiáng)制」:如果不需要處理錯(cuò)誤,可以不使用
try/catch
,但未捕獲的 Promise 拒絕(unhandled rejection)會(huì)導(dǎo)致程序崩潰(在 Node.js 或現(xiàn)代瀏覽器中)。 - 「推薦」:90% 的場(chǎng)景下需要捕獲錯(cuò)誤,因此
try/catch
是最直接的錯(cuò)誤處理方式。
所有我個(gè)人觀點(diǎn):「使用 async/await 盡量使用 try/catch」。「好的錯(cuò)誤處理不是消滅錯(cuò)誤,而是讓系統(tǒng)具備優(yōu)雅降級(jí)的能力」。
你的代碼應(yīng)該像優(yōu)秀的飛行員——在遇到氣流時(shí),仍能保持平穩(wěn)飛行。
閱讀原文:原文鏈接
該文章在 2025/4/8 8:48:07 編輯過(guò)