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

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è)明顯的問題：

1. 代碼冗余：每個(gè)異步操作都需要重復(fù)的 try...catch 結(jié)構(gòu)，增加了大量樣板代碼。
2. 可讀性差：核心的“快樂路徑”（Happy Path）代碼被包裹在 try 塊中，增加了縮進(jìn)層次，干擾了正常的閱讀流。
3. 關(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ā)生了什么變化：

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

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

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

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

1. 代碼更扁平、更清晰：消除了 try...catch 的嵌套，讓核心邏輯處于頂層作用域。
2. 減少樣板代碼：將錯(cuò)誤處理邏輯封裝在可復(fù)用的 to 函數(shù)中。
3. 強(qiáng)制性的錯(cuò)誤處理：解構(gòu)賦值 const [error, data] 迫使開發(fā)者正視 error 的存在，不容易遺漏錯(cuò)誤處理。
4. 關(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í)部分成功、部分失敗的場景，而傳統(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)編寫。

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