日韩欧美人妻无码精品白浆,www.大香蕉久久网,狠狠的日狠狠的操,日本好好热在线观看

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

然而，凡事皆有兩面。當我們享受 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ù)雜一點，比如需要連續(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，你是否感到了一絲窒息？這種寫法存在幾個明顯的問題：

1. 代碼冗余：每個異步操作都需要重復(fù)的 try...catch 結(jié)構(gòu)，增加了大量樣板代碼。
2. 可讀性差：核心的“快樂路徑”（Happy Path）代碼被包裹在 try 塊中，增加了縮進層次，干擾了正常的閱讀流。
3. 關(guā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ù)，并且永遠不會被 reject。相反，它總是 resolve 一個數(shù)組，格式為 [error, data]。

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

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

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

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

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

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

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

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

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

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

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

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

配合 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 失敗時直接進入 catch 塊，導(dǎo)致所有結(jié)果丟失。

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

閱讀原文：https://mp.weixin.qq.com/s/iBK0AUavQeRzOvKBbm7uCw