不要一直使用try-catch啦！三種async/await錯誤捕獲方式

作者：程序員Sunday 2024-11-13 01:00:18

async + await? 可以讓異步的操作擁有同步的寫法。所以在日常開發中，通過 async + await 來處理異步編程（比如：接口請求）是非常常見的一種方案。

Hello，大家好，我是 Sunday。

async + await 可以讓異步的操作擁有同步的寫法。所以在日常開發中，通過 async + await 來處理異步編程（比如：接口請求）是非常常見的一種方案。

但是，只要是異步操作，那么就會存在出現錯誤的可能。當 promise 出現錯誤時，我們可以直接通過 .catch 的方式進行捕獲，那么 async + await 應該怎么做呢？每次都使用 try-catch 進行完整的包裹嗎？有沒有更好地方案呢？

今天這篇文章，咱們就來說下這個問題~

01：使用 try/catch 進行捕獲

function getUserInfo() {
     return new Promise((resolve, reject) => {
         setTimeout(() => {
             reject('請求出現錯誤')
         }, 1000)
     })
}

async function loggedIn() {
     try {
         // 執行中斷
         let userInfo = await getUserInfo()
         console.log('不會繼續執行')
     } catch(e) {
         console.log(e)
     }
}
loggedIn()

上面的代碼在執行時，會通過 try-catch 捕獲到“請求異常”并中斷執行getUserInfo。這也是日常開發中常見處理方式。

但是如果我們存在多次的請求，就必須要通過多次的 try-catch 進行捕獲，特別是在請求需要具備連續性的時候：

async function loggedIn() {
     try {
         let userInfo = await getUserInfo()
         console.log('不會繼續執行')
         let pageInfo = await getPageInfo(userInfo?.userId)
     } catch(e) {
         console.warn(e)
     }
}
loggedIn()

這樣的處理，在當前場景下并沒有什么問題，但是如果每一個接口的請求都這么進行調用，那么就會顯得冗余了。所以，我們就可以延伸出一些其他的處理方案。

02：直接捕獲

function getUserInfo() {
     return new Promise((resolve, reject) => {
         setTimeout(() => {
             reject('請求出現錯誤')
         }, 1000)
     })
}

async function loggedIn() {
     let userInfo = await getUserInfo().catch(e => console.log(e))
     console.log('程序會繼續執行')
     if (!userInfo) return
     let pageInfo = await getPageInfo(userInfo?.userId)
}
loggedIn()

在上面的代碼中，我們通過 catch捕獲了異常，但程序會繼續執行，所以我們只需要在后續進行 if 判斷，從而完成連續的邏輯。

如果你不希望程序繼續執行，那么可以按照下面的方式進行處理

function getUserInfo() {
     return new Promise((resolve, reject) => {
         setTimeout(() => {
             reject('請求出現錯誤')
         }, 1000)
     })
}

async function loggedIn() {
     let userInfo = await getUserInfo().catch(e => {
         console.log(e)
         return Promise.reject(e)
     })
     console.log('程序不會繼續執行')
     let pageInfo = await getPageInfo(userInfo?.userId)
}
loggedIn()

這種方式會執行通過在catch塊中的Promise.reject(e)來中斷執行。

如何選擇？

1、如果錯誤不需要中斷程序執行，那么可以使用如下方式

let userInfo = await getUserInfo().catch(e => console.log(e))
if (!userInfo) return

2、如果發生錯誤時需要中斷，并且通過控制臺明確一個統一的錯誤

try {
   let userInfo = await getUserInfo()
   console.log('不會繼續執行')
   let pageInfo = await getPageInfo(userInfo?.userId)
} catch(e) {
   console.warn(e)
}

3、如果發生錯誤時需要中斷，但是不需要控制臺顯示統一的錯誤

let userInfo = await getUserInfo().catch(e => {
   console.log(e)
   return Promise.reject(e)
})
console.log('程序不會繼續執行')
let pageInfo = await getPageInfo(userInfo?.userId)

責任編輯：武曉燕來源：程序員Sunday

async await?編程