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

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

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

為了捕獲 await 后面 Promise 的 reject 狀態(tài)，我們必須將代碼包裹在 try...catch 塊中。讓我們來看一個(gè)典型的例子，比如從服務(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)的錯(cuò)誤處理邏輯，比如顯示一個(gè)提示
  }
}

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

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('文章評(píng)論:', comments);
      } catch (commentError) {
        console.error('獲取評(píng)論失敗:', commentError);
      }
    } catch (postError) {
      console.error('獲取文章失敗:', postError);
    }
  } catch (userError) {
    console.error('獲取用戶失敗:', userError);
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

現(xiàn)在，我們?cè)賮硖魬?zhàn)那個(gè)恐怖的嵌套地獄 loadPageData：

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

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

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

配合 Promise.all 使用

這個(gè)模式在處理多個(gè)并發(fā)請(qǐng)求時(shí)同樣表現(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ù)失敗');
    // 處理用戶錯(cuò)誤
  }

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

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

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

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