async/await 是 ES7 中引入的語法糖，它徹底改變了 JavaScript 中異步編程的方式。它讓我們能夠以一種看似同步的方式編寫異步代碼，極大地提高了代碼的可讀性和可維護(hù)性。

然而，凡事皆有兩面。當(dāng)我們享受 async/await 帶來的便利時，一個“老朋友”卻如影隨形，那就是 try...catch。

問題的根源：無處不在的 try...catch

為了捕獲 await 后面 Promise 的 reject 狀態(tài)，我們必須將代碼包裹在 try...catch 塊中。讓我們來看一個典型的例子，比如從服務(wù)器獲取用戶信息：

import { fetchUserById } from './api';

async function displayUser(userId) {
  try {
    const user = await fetchUserById(userId);
    console.log('用戶信息:', user.name);
    // ... 更多基于 user 的操作
  } catch (error) {
    console.error('獲取用戶失敗:', error);
    // ... 相應(yīng)的錯誤處理邏輯，比如顯示一個提示
  }
}

這段代碼本身沒有問題，它能正常工作。但問題在于，如果你的業(yè)務(wù)邏輯稍微復(fù)雜一點(diǎn)，比如需要連續(xù)請求多個接口，代碼就會變成這樣：

async function loadPageData(userId) {
 try {
    const user = await fetchUserById(userId);
    console.log('用戶信息:', user.name);

    try {
      const posts = await fetchPostsByUserId(user.id);
      console.log('用戶文章:', posts);

      try {
        const comments = await fetchCommentsForPosts(posts[0].id);
        console.log('文章評論:', comments);
      } catch (commentError) {
        console.error('獲取評論失敗:', commentError);
      }
    } catch (postError) {
      console.error('獲取文章失敗:', postError);
    }
  } catch (userError) {
    console.error('獲取用戶失敗:', userError);
  }
}

看到這些層層嵌套的 try...catch，你是否感到了一絲窒息？這種寫法存在幾個明顯的問題：

• 代碼冗余：每個異步操作都需要重復(fù)的 try...catch 結(jié)構(gòu)，增加了大量樣板代碼。
• 可讀性差：核心的“快樂路徑”（Happy Path）代碼被包裹在 try 塊中，增加了縮進(jìn)層次，干擾了正常的閱讀流。
• 關(guān)注點(diǎn)混合：成功邏輯和失敗邏輯緊密地耦合在同一個代碼塊里，使得函數(shù)職責(zé)不夠單一。

那么，有沒有一種方法可以擺脫這種困境呢？答案是肯定的。

優(yōu)雅的解決方案：Go 語言風(fēng)格的錯誤處理

我們可以借鑒 Go 語言的錯誤處理模式。在 Go 中，函數(shù)通常會返回兩個值：result 和 error。調(diào)用者通過檢查 error 是否為 nil 來判斷操作是否成功。

我們可以將這種思想引入到 JavaScript 的 async/await 中。創(chuàng)建一個輔助函數(shù)（我們稱之為 to），它接收一個 Promise作為參數(shù)，并且永遠(yuǎn)不會被 reject。相反，它總是 resolve 一個數(shù)組，格式為 [error, data]。

• 如果 Promise 成功 resolve，它返回 [null, data]。
• 如果 Promise 失敗 reject，它返回 [error, null]。

讓我們來實(shí)現(xiàn)這個 to 輔助函數(shù)。

如果你不使用 TypeScript，純 JavaScript 版本如下：

這個 to 函數(shù)非常小巧，但威力巨大。它將 try...catch 的邏輯封裝在了內(nèi)部，向我們暴露了一個統(tǒng)一、扁平的接口。

實(shí)踐應(yīng)用：重構(gòu)我們的代碼

現(xiàn)在，讓我們用新的 to 函數(shù)來重構(gòu)之前的 displayUser 函數(shù)：

看看發(fā)生了什么變化：

• 沒有 try...catch 了！ 整個函數(shù)體變得非常扁平。
• 錯誤優(yōu)先處理：我們首先通過一個 if 語句檢查并處理錯誤（這被稱為“衛(wèi)語句”或 Guard Clause），然后提前返回。
• 可讀性極高：處理完錯誤后，剩下的代碼都是成功路徑下的核心邏輯，一目了然，不再有任何嵌套。

現(xiàn)在，我們再來挑戰(zhàn)那個恐怖的嵌套地獄 loadPageData：

簡直是天壤之別！代碼變成了線性的、可預(yù)測的流程，每個步驟的錯誤處理都清晰獨(dú)立。

新模式的優(yōu)勢總結(jié)

• 代碼更扁平、更清晰：消除了 try...catch 的嵌套，讓核心邏輯處于頂層作用域。
• 減少樣板代碼：將錯誤處理邏輯封裝在可復(fù)用的 to 函數(shù)中。
• 強(qiáng)制性的錯誤處理：解構(gòu)賦值 const [error, data] 迫使開發(fā)者正視 error 的存在，不容易遺漏錯誤處理。
• 關(guān)注點(diǎn)分離：通過衛(wèi)語句將錯誤處理邏輯與成功邏輯分離開，代碼更易于維護(hù)。

配合 Promise.all 使用

這個模式在處理多個并發(fā)請求時同樣表現(xiàn)出色。

async function loadDashboard(userId) {
 const [
    [userError, userData],
    [settingsError, settingsData]
  ] = await Promise.all([
    to(fetchUser(userId)),
    to(fetchUserSettings(userId))
  ]);

 if (userError) {
    console.error('加載用戶數(shù)據(jù)失敗');
    // 處理用戶錯誤
  }

 if (settingsError) {
    console.error('加載用戶設(shè)置失敗');
    // 處理設(shè)置錯誤
  }

 // 即使其中一個失敗，另一個成功的數(shù)據(jù)依然可用
 if (userData) {
    // ...
  }
 if (settingsData) {
    // ...
  }
}

使用 Promise.all 配合 to 函數(shù)，你可以優(yōu)雅地處理多個 Promise 并發(fā)執(zhí)行時部分成功、部分失敗的場景，而傳統(tǒng)的 try...catch 會在任何一個 Promise 失敗時直接進(jìn)入 catch 塊，導(dǎo)致所有結(jié)果丟失。

try...catch 是 JavaScript 錯誤處理的基石，我們并非要完全消滅它。實(shí)際上，我們的 to 函數(shù)內(nèi)部就使用了它。關(guān)鍵在于，我們應(yīng)該將它抽象和封裝起來，而不是在業(yè)務(wù)代碼中一次又一次地手動編寫。