在 JavaScript 開(kāi)發(fā)者的日常中，這樣的對(duì)話時(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)化史

js
代碼解讀
復(fù)制代碼
// 回調(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)求失?。撳e(cuò)誤會(huì)使 Promise 進(jìn)入 rejected 狀態(tài)。

js
代碼解讀
復(fù)制代碼
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)景。

js
代碼解讀
復(fù)制代碼
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()

js
代碼解讀
復(fù)制代碼
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é)合

js
代碼解讀
復(fù)制代碼
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)（慎用，適合兜底）

js
代碼解讀
復(fù)制代碼
// 瀏覽器端全局監(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ù)分析

錯(cuò)誤處理體系

1. 基礎(chǔ)層：80% 的異步操作使用 try/catch + 類型檢查
2. 中間層：15% 的通用錯(cuò)誤使用全局?jǐn)r截 + 日志上報(bào)
3. 戰(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)飛行。大家如有不同意見(jiàn)，還請(qǐng)?jiān)u論區(qū)討論，說(shuō)出自己的見(jiàn)解。