前言

寫異步函數(shù)的時(shí)候，promise 和 async 兩種方案都非常常見，甚至同一個(gè)項(xiàng)目里，不同的開發(fā)人員都使用不同的習(xí)慣, 不過(guò)關(guān)于兩者的比較不是本文關(guān)注的重點(diǎn)，只總結(jié)為一句話：“async 是異步編程的終極解決方案”。
當(dāng)使用 async 函數(shù)的時(shí)候，很多文章都說(shuō)建議用 try catch 來(lái)捕獲異常, 可是實(shí)際上我看了很多項(xiàng)目的代碼，遵循的并不是嚴(yán)謹(jǐn)，很多都沒(méi)有用，甚至 catch 函數(shù)都沒(méi)寫，這是為什么呢？
我們先看下使用 try catch 情況下的代碼示例：

示例1 ：使用 try catch

function getUserInfo () {return new Promise((resolve, reject) => {setTimeout(() => {reject('請(qǐng)求異常')}, 1000)})
}async function logined () {try {let userInfo = await getUserInfo()// 執(zhí)行中斷let pageInfo = await getPageInfo(userInfo?.userId)} catch(e) {console.warn(e)}
}logined()

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

示例2：直接 catch

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

function getUserInfo () {return new Promise((resolve, reject) => {setTimeout(() => {reject('請(qǐng)求異常')}, 1000)})
}async function logined () {let userInfo = await getUserInfo().catch(e => console.warn(e))// 執(zhí)行沒(méi)有中斷，userInfo 為 undefinedif (!userInfo) return // 需要做非空校驗(yàn)let pageInfo = await getPageInfo(userInfo?.userId)
}logined()

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

示例3：在 catch 里 reject

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

function getUserInfo () {return new Promise((resolve, reject) => {setTimeout(() => {reject('請(qǐng)求異常')}, 1000)})
}async function logined () {let userInfo = await getUserInfo().catch(e => {console.warn(e)return Promise.reject(e) // 會(huì)導(dǎo)致控制臺(tái)出現(xiàn) uncaught (in promise) 報(bào)錯(cuò)信息})// 執(zhí)行中斷let pageInfo = await getPageInfo(userInfo?.userId)
}logined()

一般我們?cè)陧?xiàng)目里都是用 axios 或者 fetch 之類發(fā)送請(qǐng)求，會(huì)對(duì)其進(jìn)行一個(gè)封裝，也可以在里面進(jìn)行 catch 操作，對(duì)錯(cuò)誤信息先一步處理，至于是否需要 reject，就看你是否想要在 await 命令異常時(shí)候中斷了；不使用 reject 則不會(huì)中斷，但是需要每個(gè)接口拿到 response 后先 非空校驗(yàn)， 使用 reject 則會(huì)在異常處中斷，并且會(huì)在控制臺(tái)暴露 uncaught (in promise) 報(bào)錯(cuò)信息。
圖片

建議

不需要在 await 處異常時(shí)中斷，可以這樣寫，需要做非空校驗(yàn)，控制臺(tái)不會(huì)有報(bào)錯(cuò)信息

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

需要在 await 處異常時(shí)中斷，并且在意控制臺(tái)報(bào)錯(cuò)，可以這樣寫

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

需要在 await 處異常時(shí)中斷，但是不在意控制臺(tái)報(bào)錯(cuò)，則可以這樣寫

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

總結(jié)

幾種寫法，初看可能覺(jué)得第三種 catch 這種寫法是最好的，但是細(xì)想下，從用戶體驗(yàn)上來(lái)看，我覺(jué)得 try catch 是最好的，邏輯直觀、符合同步編程思維，控制臺(tái)不會(huì)暴露 uncaught (in promise) 報(bào)錯(cuò)信息；
而鏈?zhǔn)秸{(diào)用的 catch (里面再 reject)，是傳統(tǒng) promise 的回調(diào)寫法，既然已經(jīng)用 async await 這種同步編程寫法了，再用 catch 鏈?zhǔn)綄懛?#xff0c;感覺(jué)沒(méi)必要。