主頁 > .NET開發 > JavaScript:異步錯誤處理與async/await和then/catch之間的區別

JavaScript:異步錯誤處理與async/await和then/catch之間的區別

2021-12-21 17:11:08 .NET開發

只是想先發制人地說,我熟悉 JavaScript 中的 async/await 和 promises,因此無需為此將我鏈接到某些 MDN 頁面。

我有一個功能來獲取用戶詳細資訊并將其顯示在 UI 上。


async function someHttpCall() {
  throw 'someHttpCall error'
}
async function fetchUserDetails() {
  throw 'fetchUserDetails error'
}

function displayUserDetails(userDetails) {
  console.log('userDetails:', userDetails)
}

async function fetchUser() {
  try {
    const user = await someHttpCall()
    try {
      const details = await fetchUserDetails(user)
      returndisplayUserDetails(details)
    } catch (fetchUserDetailsError) {
      console.log('fetching user error', fetchUserDetailsError)
    }
  } catch (someHttpCallError) {
    console.log('networking error:', someHttpCallError)
  }
}

它首先通過 via 進行 HTTP 呼叫someHttpCall,如果成功則繼續進行fetchUserDetails,成功后我們將在 Ui via 上顯示詳細資訊returndisplayUserDetails

如果someHttpCall失敗,我們將停止并且不fetchUserDetails打電話。換句話說,我們希望將錯誤處理someHttpCall和資料處理從fetchUserDetails

我寫的函式是帶有嵌套try catch塊的,如果嵌套變深,它就不能很好地擴展,我試圖使用普通thencatch

這是我的第一次嘗試

function fetchUser2() {
  someHttpCall()
    .then(
      (user) => fetchUserDetails(user),
      (someHttpCallError) => {
        console.log('networking error:', someHttpCallError)
      }
    )
    .then(
      (details) => {
        displayUserDetails(details)
      }, //
      (fetchUserDetailsError) => {
        console.log('fetching user error', fetchUserDetailsError)
      }
    )
}

問題是第二個then會運行,即displayUserDetails即使someHttpCall失敗。為了避免這種情況,我不得不讓前面的.catch塊拋出

所以這是更新的版本

function fetchUser2() {
  someHttpCall()
    .then(
      (user) => fetchUserDetails(user),
      (someHttpCallError) => {
        console.log('networking error:', someHttpCallError)
        throw someHttpCallError
      }
    )
    .then(
      (details) => {
        displayUserDetails(details)
      }, //
      (fetchUserDetailsError) => {
        console.log('fetching user error', fetchUserDetailsError)
      }
    )
}

然而,現在第二個 catch 將作為 throw 的結果被呼叫。所以當someHttpCall失敗時,在我們處理someHttpCallError錯誤后,我們會進入這個(fetchUserDetailsError) => { console.log('fetching user error', fetchUserDetailsError) }不好的,因為fetchUserDetails從來沒有被呼叫所以我們不需要處理fetchUserDetailsError(我知道在這種情況下someHttpCallError變成fetchUserDetailsError了)

我可以在那里添加一些條件檢查來區分這兩個錯誤,但這似乎不太理想。所以我想知道如何通過使用.then.catch在這里實作相同的目標來改進這一點。

uj5u.com熱心網友回復:

我可以在那里添加一些條件檢查來區分這兩個錯誤,但這似乎不太理想。

實際上,這聽起來像是一個理想的情況。這意味著您不必嵌套任何try / catch可以使您的代碼更具可讀性的塊。這是async / await要解決的問題之一。

一個解決方案可能是通過擴展Error介面來創建自定義錯誤,以便能夠確定錯誤發生的方式和位置。

class CustomError extends Error {
  constructor(name, ...args) {
    super(...args)
    this.name = name
  }
}

在與錯誤對應的函式中拋出您的錯誤。

async function someHttpCall() {
  throw new CustomError('HttpCallError', 'someHttpCall error');
}

async function fetchUserDetails(user) {
  throw new CustomError('UserDetailsError', 'fetchUserDetails error')
}

現在,您可以通過檢查錯誤的name屬性來區分錯誤,從而控制錯誤流

async function fetchUser() {
  try {
    const user = await someHttpCall()
    const details = await fetchUserDetails(user)
    return displayUserDetails(details)
  } catch (error) {
    switch(error.name) {
      case 'HttpCallError':
        console.log('Networking error:', error)
        break

      case 'UserDetailsError':
        console.log('Fetching user error', error)
        break
    }
  }
}

uj5u.com熱心網友回復:

我想知道如何通過使用.then.catch在這里實作相同的目標來改進這一點

如果您想復制相同的行為,則無法避免嵌套:

function fetchUser2() {
  return someHttpCall().then(
    (user) => {
      return fetchUserDetails(user).then(
        (details) => {
          return displayUserDetails(details)
        },
        (fetchUserDetailsError) => {
          console.log('fetching user error', fetchUserDetailsError)
        }
      )
    },
    (someHttpCallError) => {
      console.log('networking error:', someHttpCallError)
      throw someHttpCallError
    }
  )
}

(完全等同于try/catch將使用.then(…).catch(…)代替.then(…, …),但您可能實際上并不想要那個。)

我寫的函式是 [nested],如果嵌套變深,它就不能很好地擴展,我試圖重寫它以獲得更好的可讀性 […]

為此,我建議結合await使用.catch()

async function fetchUser() {
  try {
    const user = await someHttpCall().catch(someHttpCallError => {
      throw new Error('networking error', {cause: someHttpCallError});
    });
    const details = await fetchUserDetails(user).catch(fetchUserDetailsError => {
      throw new Error('fetching user error', {cause: fetchUserDetailsError});
    });
    return displayUserDetails(details);
  } catch (someError) {
    console.log(someError.message, someError.cause);
  }
}

cause選項Error仍然很新,你可能需要一個 polyfill)

uj5u.com熱心網友回復:

我一直在鼓舞銹病Result型別(您處理沿途每一個潛在的錯誤,力)。

所以我所做的是在每個單獨的函式中處理例外,決不允許拋出例外,而是回傳一個錯誤(如果出現問題)或所需的回傳值(如果沒有發生例外)。這是我如何做的一個例子(包括評論):

TS游樂場

如果您不熟悉 TypeScript,可以在上面的 TypeScript Playground 鏈接(頁面右側)中查看以下代碼的純 JavaScript 版本(沒有型別資訊)。

// This is the code in my exception-handling utility module:
// exception-utils.ts

export type Result <T = void, E extends Error = Error> = T | E;

export function getError (value: unknown): Error {
  return value instanceof Error ? value : new Error(String(value));
}

export function isError <T>(value: T): value is T & Error {
  return value instanceof Error;
}

export function assertNotError <T>(value: T): asserts value is Exclude<T, Error> {
  if (value instanceof Error) throw value;
}
// This is how to use it:
// main.ts

import {assertNotError, getError, isError, type Result} from './exception-utils.ts';

/** 
 * Returns either Error or string ID,
 * but won't throw because it catches exceptions internally
 */
declare function getStringFromAPI1 (): Promise<Result<string>>;

/** 
 * Requires ID from API1. Returns either Error or final number value,
 * but won't throw because it catches exceptions internally
 */
declare function getNumberFromAPI2 (id: string): Promise<Result<number>>;

/**
 * Create version of second function with no parameter required:
 * Returns either Error or final number value,
 * but won't throw because it catches exceptions internally
 * 
 * The previous two functions work just like this, using the utilities
 */
async function fetchValueFromAPI2 (): Promise<Result<number>> {
  try {
    const id = await getStringFromAPI1(); // Error or string
    assertNotError(id); // throws if `id` is an Error
    return getNumberFromAPI2(id); // Error or number
  }
  catch (ex) {
    return getError(ex);
  }
}

async function doSomethingWithValueFromAPI2 (): Promise<void> {
  const value = await fetchValueFromAPI2(); // value is number or Error
  if (isError(value)) {
    // handle error
  }
  else console.log(value); // value is number at this point
}

轉載請註明出處,本文鏈接:https://www.uj5u.com/net/388358.html

標籤:javascript 异步 异步等待 es6-promise

上一篇:顫振異步等待未按預期作業

下一篇:返回列表

標籤雲
其他(132122) Python(22145) Java(14353) JavaScript(13767) C(10610) 區塊鏈(7949) AI(6673) 基礎類(6313) 腳本語言(PerlPython)(5129) 非技術區(4971) MySQL(4967) Android(4176) Linux(3945) PHP(3464) C語言(3288) C#(3136) C++語言(3117) 爪哇(3087) html(2818) Java相關(2746) 疑難問題(2699) sql(2574) 單片機工控(2479) 数组(2386) R(2346) 熊猫(2315) 反应(2043) Web開發(1951) 網絡通信(1793) VBA(1779) 數據庫相關(1767) VB基礎類(1755) css(1711) 数据框(1658) 開發(1646) 节点.js(1639) ASP.NET(1638) .NETCore(1627) 系統維護與使用區(1617) 基礎和管理(1579) JavaEE(1566) C++(1560) 專題技術討論區(1515) HtmlCss(1494) Windows客戶端使用(1484) 蟒蛇-3.x(1472) 列表(1377) Unity3D(1365) VCL組件開發及應用(1353) json(1308) iOS(1292) .NET技术(1287) Qt(1258) 安卓(1238) HTML(CSS)(1220) 其他技術討論專區(1200) WindowsServer(1194) 打字稿(1174) 查询(1160) 扑(1153)

熱門瀏覽
  • WebAPI簡介

    Web體系結構: 有三個核心:資源(resource),URL(統一資源識別符號)和表示 他們的關系是這樣的:一個資源由一個URL進行標識,HTTP客戶端使用URL定位資源,表示是從資源回傳資料,媒體型別是資源回傳的資料格式。 接下來我們說下HTTP. HTTP協議的系統是一種無狀態的方式,使用請求/ ......

    uj5u.com 2020-09-09 22:07:47 more
  • asp.net core 3.1 入口:Program.cs中的Main函式

    本文分析Program.cs 中Main()函式中代碼的運行順序分析asp.net core程式的啟動,重點不是剖析原始碼,而是理清程式開始時執行的順序。到呼叫了哪些實體,哪些法方。asp.net core 3.1 的程式入口在專案Program.cs檔案里,如下。ususing System; us ......

    uj5u.com 2020-09-09 22:07:49 more
  • asp.net網站作為websocket服務端的應用該如何寫

    最近被websocket的一個問題困擾了很久,有一個需求是在web網站中搭建websocket服務。客戶端通過網頁與服務器建立連接,然后服務器根據ip給客戶端網頁發送資訊。 其實,這個需求并不難,只是剛開始對websocket的內容不太了解。上網搜索了一下,有通過asp.net core 實作的、有 ......

    uj5u.com 2020-09-09 22:08:02 more
  • ASP.NET 開源匯入匯出庫Magicodes.IE Docker中使用

    Magicodes.IE在Docker中使用 更新歷史 2019.02.13 【Nuget】版本更新到2.0.2 【匯入】修復單列匯入的Bug,單元測驗“OneColumnImporter_Test”。問題見(https://github.com/dotnetcore/Magicodes.IE/is ......

    uj5u.com 2020-09-09 22:08:05 more
  • 在webform中使用ajax

    如果你用過Asp.net webform, 說明你也算是.NET 開發的老兵了。WEBform應該是2011 2013左右,當時還用visual studio 2005、 visual studio 2008。后來基本都用的是MVC。 如果是新開發的專案,估計沒人會用webform技術。但是有些舊版 ......

    uj5u.com 2020-09-09 22:08:50 more
  • iis添加asp.net網站,訪問提示:由于擴展配置問題而無法提供您請求的

    今天在iis服務器配置asp.net網站,遇到一個問題,記錄一下: 問題:由于擴展配置問題而無法提供您請求的頁面。如果該頁面是腳本,請添加處理程式。如果應下載檔案,請添加 MIME 映射。 WindowServer2012服務器,添加角色安裝完.netframework和iis之后,運行aspx頁面 ......

    uj5u.com 2020-09-09 22:10:00 more
  • WebAPI-處理架構

    帶著問題去思考,大家好! 問題1:HTTP請求和回傳相應的HTTP回應資訊之間發生了什么? 1:首先是最底層,托管層,位于WebAPI和底層HTTP堆疊之間 2:其次是 訊息處理程式管道層,這里比如日志和快取。OWIN的參考是將訊息處理程式管道的一些功能下移到堆疊下端的OWIN中間件了。 3:控制器處理 ......

    uj5u.com 2020-09-09 22:11:13 more
  • 微信門戶開發框架-使用指導說明書

    微信門戶應用管理系統,采用基于 MVC + Bootstrap + Ajax + Enterprise Library的技術路線,界面層采用Boostrap + Metronic組合的前端框架,資料訪問層支持Oracle、SQLServer、MySQL、PostgreSQL等資料庫。框架以MVC5,... ......

    uj5u.com 2020-09-09 22:15:18 more
  • WebAPI-HTTP編程模型

    帶著問題去思考,大家好!它是什么?它包含什么?它能干什么? 訊息 HTTP編程模型的核心就是訊息抽象,表示為:HttPRequestMessage,HttpResponseMessage.用于客戶端和服務端之間交換請求和回應訊息。 HttpMethod類包含了一組靜態屬性: private stat ......

    uj5u.com 2020-09-09 22:15:23 more
  • 部署WebApi隨筆

    一、跨域 NuGet參考Microsoft.AspNet.WebApi.Cors WebApiConfig.cs中配置: // Web API 配置和服務 config.EnableCors(new EnableCorsAttribute("*", "*", "*")); 二、清除默認回傳XML格式 ......

    uj5u.com 2020-09-09 22:15:48 more
最新发布
  • JavaScript:異步錯誤處理與async/await和then/catch之間的區別

    只是想先發制人地說,我熟悉 JavaScript 中的 async/await 和 promises,因此無需為此將我鏈接到某些 MDN 頁面。我有一個功能來獲取用戶詳細資訊并將其顯示在 UI 上。async fun...

    uj5u.com 2021-12-21 17:11:08 more
  • 顫振異步等待未按預期作業

    自從我開始 Flutter 以來,我面臨著一個與 Flutter async-await 相關的問題。大多數情況下,我嘗試使用 Future 并等待結果,它會跳過等待并獲得最短的回傳方式。if i try to prin...

    uj5u.com 2021-12-21 17:10:14 more
  • 將超時插入代碼但它不會創建暫停

    //In order to run in terminal insert the following code to activate localhost: npx parcel src/index.htmlimport { chordType, transpose , note } from '@tonaljs/to...

    uj5u.com 2021-12-21 17:00:06 more
  • 如何修復自定義輪播的尺寸

    我嘗試在我的模態中添加影像輪播,但輪播會根據不同的影像尺寸改變尺寸在此處輸入影像描述 在此處輸入影像描述
    uj5u.com熱心網友回復:您可以使用 css 為輪播設定固定高度,以便...

    uj5u.com 2021-12-21 16:59:01 more
  • 如何擺脫自定義底部導航欄顫動周圍的空白?

    我創建了一個自定義的底部中殿欄,但它周圍仍然有一個空白區域。如何擺脫它?此外,如果我在容器內放置一個按鈕以為其指定高度或寬度,也會發現相同的問題。影像是:代碼是:bottomNavi...

    uj5u.com 2021-12-21 16:57:15 more
  • 無法理解反應依賴中的問題

    我必須對多種語言使用反應翻譯。當我安裝"i18next": "^21.6.3","react-i18next": "^11.15.1",它開始拋出錯誤。這是我的 i18.jsimport i18n from 'i18next';import { initRe...

    uj5u.com 2021-12-21 16:56:09 more
  • 使用Powershell升級Azure應用服務

    我正在嘗試將應用服務計劃 (ASP)P2V3從S1.我正在使用以下代碼:Set-AzAppServicePlan -ResourceGroupName "<RG Group Name>" -Name "<App service Name>" -Tier "PremiumV3"...

    uj5u.com 2021-12-21 14:44:58 more
  • 將程式置于前臺或啟動它

    對于我經常使用的少數程式,我試圖為我撰寫一些函式或別名,以檢查該程式是否已經在運行并將其視窗置于前臺,否則啟動該程式。使用示例np, 句柄notepad.exe:PS> np檢查是否notepad...

    uj5u.com 2021-12-21 14:44:21 more
  • 根據檔案名中的日期歸檔檔案。Powershell腳本

    我正在嘗試制作簡單的 powershell 腳本,該腳本每天都會歸檔檔案。每個檔案在其名稱的開頭都有日期,例如:20211220_Something.csv, 20211220_SomethingElse.txt, 20211219_Somet...

    uj5u.com 2021-12-21 14:43:15 more
  • PowerShell5.1vPWSH輸出檔案

    更多的是一個好奇的問題。有沒有人注意到 PS(5.1) 與 pwsh(7.2.1) 和使用Out-Filecmdlet之間的區別?我說得更多的是你在 PS 中運行一個腳本,它test.log在這個實體中使用out-fi...

    uj5u.com 2021-12-21 14:42:31 more