亚洲乱色熟女一区二区三区丝袜,天堂√中文最新版在线,亚洲精品乱码久久久久久蜜桃图片,香蕉久久久久久av成人,欧美丰满熟妇bbb久久久

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

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

問(wèn)題的根源：無(wú)處不在的 try...catch

為了捕獲 await 后面 Promise 的 reject 狀態(tài)，我們必須將代碼包裹在 try...catch 塊中。讓我們來(lái)看一個(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è)提示
  }
}

這段代碼本身沒(méi)有問(wèn)題，它能正常工作。但問(wèn)題在于，如果你的業(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，你是否感到了一絲窒息？這種寫(xiě)法存在幾個(gè)明顯的問(wèn)題：

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

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

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

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

我們可以將這種思想引入到 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]。

讓我們來(lái)實(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ù)來(lái)重構(gòu)之前的 displayUser 函數(shù)：

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

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

現(xiàn)在，我們?cè)賮?lái)挑戰(zhàn)那個(gè)恐怖的嵌套地獄 loadPageData：

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

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

1. 代碼更扁平、更清晰：消除了 try...catch 的嵌套，讓核心邏輯處于頂層作用域。
2. 減少樣板代碼：將錯(cuò)誤處理邏輯封裝在可復(fù)用的 to 函數(shù)中。
3. 強(qiáng)制性的錯(cuò)誤處理：解構(gòu)賦值 const [error, data] 迫使開(kāi)發(fā)者正視 error 的存在，不容易遺漏錯(cuò)誤處理。
4. 關(guān)注點(diǎn)分離：通過(guò)衛(wèi)語(yǔ)句將錯(cuò)誤處理邏輯與成功邏輯分離開(kāi)，代碼更易于維護(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)該將它抽象和封裝起來(lái)，而不是在業(yè)務(wù)代碼中一次又一次地手動(dòng)編寫(xiě)。

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