亚洲热在线,野战在线,全黄h全肉细节文霸道总裁

[轉(zhuǎn)帖]async/await 函數(shù)到底要不要加 try catch ?

當(dāng)前位置：點(diǎn)晴教程→知識管理交流 →『技術(shù)文檔交流』

freeflydom

2023年7月24日 17:17 本文熱度 887

前言

寫異步函數(shù)的時候，promise 和 async 兩種方案都非常常見，甚至同一個項目里，不同的開發(fā)人員都使用不同的習(xí)慣, 不過關(guān)于兩者的比較不是本文關(guān)注的重點(diǎn)，只總結(jié)為一句話：“async 是異步編程的終極解決方案”。

當(dāng)使用 async 函數(shù)的時候，很多文章都說建議用 try catch 來捕獲異常, 可是實(shí)際上我看了很多項目的代碼，遵循的并不是嚴(yán)謹(jǐn)，很多都沒有用，甚至 catch 函數(shù)都沒寫，這是為什么呢？

我們先看下使用 try catch 情況下的代碼示例：

示例1 ：使用 try catch

function getUserInfo () {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
                reject('請求異常')
        }, 1000)
    })
}

async function logined () {
    try {
        let userInfo = await getUserInfo()
        // 執(zhí)行中斷
        let pageInfo = await getPageInfo(userInfo?.userId)
    } catch(e) {
        console.warn(e)
    }
}

logined()

執(zhí)行后會在 catch 里捕獲 請求異常，然后 getUserInfo 函數(shù)中斷執(zhí)行，這是符合邏輯的，對于有依賴關(guān)系的接口，中斷執(zhí)行可以避免程序崩潰，這里唯一的問題是 try catch 貌似占據(jù)了太多行數(shù)，如果每個接口都寫的話看起來略顯冗余。

示例2：直接 catch

鑒于正常情況下，await 命令后面是一個 Promise 對象, 所以上面代碼可以很自然的想到優(yōu)化方案：

function getUserInfo () {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
                reject('請求異常')
        }, 1000)
    })
}

async function logined () {
    let userInfo = await getUserInfo().catch(e => console.warn(e))
    // 執(zhí)行沒有中斷，userInfo 為 undefined
    if (!userInfo) return // 需要做非空校驗
    let pageInfo = await getPageInfo(userInfo?.userId)
}

logined()

執(zhí)行后 catch 可以正常捕獲異常，但是程序沒有中斷，返回值 userInfo 為 undefined, 所以如果這樣寫的話，就需要對返回值進(jìn)行非空校驗, if (!userInfo) return 我覺得這樣有點(diǎn)反邏輯，異常時就應(yīng)該中斷執(zhí)行才對；

示例3：在 catch 里 reject

可以繼續(xù)優(yōu)化，在 catch 里面加一行 return Promise.reject(e), 可以使 await 中斷執(zhí)行；

完整代碼：

function getUserInfo () {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('請求異常')
        }, 1000)
    })
}

async function logined () {
    let userInfo = await getUserInfo().catch(e => {
        console.warn(e)
        return Promise.reject(e) // 會導(dǎo)致控制臺出現(xiàn) uncaught (in promise) 報錯信息
    })
    // 執(zhí)行中斷
    let pageInfo = await getPageInfo(userInfo?.userId)
}

logined()

一般我們在項目里都是用 axios 或者 fetch 之類發(fā)送請求，會對其進(jìn)行一個封裝，也可以在里面進(jìn)行 catch 操作，對錯誤信息先一步處理，至于是否需要 reject，就看你是否想要在 await 命令異常時候中斷了；不使用 reject 則不會中斷，但是需要每個接口拿到 response 后先非空校驗，使用 reject 則會在異常處中斷，并且會在控制臺暴露 uncaught (in promise) 報錯信息。

建議

不需要在 await 處異常時中斷，可以這樣寫，需要做非空校驗，控制臺不會有報錯信息

let userInfo = await getUserInfo().catch(e => console.warn(e))

if (!userInfo) return

需要在 await 處異常時中斷，并且在意控制臺報錯，可以這樣寫

try {
    let userInfo = await getUserInfo()
    // 執(zhí)行中斷
    let pageInfo = await getPageInfo(userInfo?.userId)
} catch(e) {
    console.warn(e)
}

需要在 await 處異常時中斷，但是不在意控制臺報錯，則可以這樣寫

let userInfo = await getUserInfo().catch(e => {
    console.warn(e)
    return Promise.reject(e) // 會導(dǎo)致控制臺出現(xiàn) uncaught (in promise) 報錯信息
})
// 執(zhí)行中斷
let pageInfo = await getPageInfo(userInfo?.userId)