前言
在 JavaScript 開發者的日常中，這樣的對話時常發生：
「async/await 看似優雅的語法糖背后，隱藏著一個關鍵問題：錯誤處理策略的抉擇」。
在 JavaScript 中使用 async/await 時，很多人會問：「“必須使用 try/catch 嗎？”」
其實答案并非絕對，而是取決于你如何設計錯誤處理策略和代碼風格。
接下來，我們將探討 async/await 的錯誤處理機制、使用 try/catch 的優勢，以及其他可選的錯誤處理方法。
async/await 的基本原理
異步代碼的進化史
// 回調地獄時代
fetchData(url1, (data1) => {
process(data1, (result1) => {
fetchData(url2, (data2) => {
// 更多嵌套...
})
})
})
// Promise 時代
fetchData(url1)
.then(process)
.then(() => fetchData(url2))
.catch(handleError)
// async/await 時代
async function workflow() {
const data1 = await fetchData(url1)
const result = await process(data1)
return await fetchData(url2)
}
async/await 是基于 「Promise 的語法糖」，它使異步代碼看起來「更像同步代碼」，從而更易讀、易寫。一個 async 函數總是返回一個 Promise，你可以在該函數內部使用 await 來等待異步操作完成。
如果在異步操作中「出現錯誤」（例如網絡請求失敗），該錯誤會使 Promise 「進入 rejected 狀態」。
async function fetchData() {
const response = await fetch("https://api.example.com/data");
const data = await response.json();
return data;
}
使用 try/catch 捕獲錯誤
打個比喻，就好比「鐵路信號系統」
想象 async 函數是一列高速行駛的列車：
- 「未捕獲的錯誤如同脫軌事故」：會沿著鐵路網（調用棧）逆向傳播
為了優雅地捕獲 async/await 中出現的錯誤，通常我們會使用 try/catch 語句。這種方式「可以在同一個代碼塊中捕獲同步和異步拋出的錯誤」，使得錯誤處理邏輯更集中、直觀。
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);
// 根據需要，可以在此處處理錯誤，或者重新拋出以便上層捕獲
throw error;
}
}
不使用 try/catch 的替代方案
雖然 try/catch 是最直觀的錯誤處理方式，但你也可以不在 async 函數內部使用它，而是「在調用該 async 函數時捕獲錯誤」。
「在 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();
}
// 調用處使用 Promise.catch 捕獲錯誤
fetchData()
.then(data => {
console.log("Data:", data);
})
.catch(error => {
console.error("Error fetching data:", error);
});
這種方式將錯誤處理邏輯移至函數調用方，適用于以下場景：
- 希望讓 async 函數保持簡潔，將錯誤處理交給全局統一的錯誤處理器（例如在 React 應用中可以使用 Error Boundary）。
「將 await 與 catch 結合」
async function fetchData() {
const response = await fetch('https://api.example.com/data').catch(error => {
console.error('Request failed:', error);
return null; // 返回兜底值
});
if (!response) return;
// 繼續處理 response...
}
「全局錯誤監聽（慎用，適合兜底）」
// 瀏覽器端全局監聽
window.addEventListener('unhandledrejection', event => {
event.preventDefault();
sendErrorLog({
type: 'UNHANDLED_REJECTION',
error: event.reason,
stack: event.reason.stack
});
showErrorToast('系統異常，請聯系管理員');
});
// Node.js 進程管理
process.on('unhandledRejection', (reason, promise) => {
logger.fatal('未處理的 Promise 拒絕:', reason);
process.exitCode = 1;
});
錯誤處理策略矩陣
決策樹分析
是否可恢復錯誤致命錯誤批量操作需要立即處理錯誤? 使用 try/catch 錯誤類型 Promise.catch 全局監聽 Promise.allSettled
錯誤處理體系
- 「基礎層」：80% 的異步操作使用 try/catch + 類型檢查
- 「中間層」：15% 的通用錯誤使用全局攔截 + 日志上報
小結
我的觀點是：「不強制要求，但強烈推薦」
- 「不強制」：如果不需要處理錯誤，可以不使用
try/catch，但未捕獲的 Promise 拒絕（unhandled rejection）會導致程序崩潰（在 Node.js 或現代瀏覽器中）。 - 「推薦」：90% 的場景下需要捕獲錯誤，因此
try/catch 是最直接的錯誤處理方式。
所有我個人觀點：「使用 async/await 盡量使用 try/catch」。「好的錯誤處理不是消滅錯誤，而是讓系統具備優雅降級的能力」。
你的代碼應該像優秀的飛行員——在遇到氣流時，仍能保持平穩飛行。
閱讀原文：原文鏈接
該文章在 2025/4/8 8:48:07 編輯過
400 186 1886
