大廠(chǎng)技術(shù)??高級(jí)前端??Node進(jìn)階

點(diǎn)擊上方?程序員成長(zhǎng)指北，關(guān)注公眾號(hào)
回復(fù)1，加入高級(jí)Node交

前言

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

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

我們先看下使用 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í)行中斷l(xiāng)et?pageInfo?=?await?getPageInfo(userInfo?.userId)}?catch(e)?{console.warn(e)}
}logined()
復(fù)制代碼

執(zhí)行后會(huì)在 catch 里捕獲?請(qǐng)求異常，然后 getUserInfo 函數(shù)中斷執(zhí)行，這是符合邏輯的，對(duì)于有依賴(lài)關(guān)系的接口，中斷執(zhí)行可以避免程序崩潰，這里唯一的問(wèn)題是 try catch 貌似占據(jù)了太多行數(shù)，如果每個(gè)接口都寫(xiě)的話(huà)看起來(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()
復(fù)制代碼

執(zhí)行后 catch 可以正常捕獲異常，但是程序沒(méi)有中斷，返回值?userInfo?為?undefined, 所以如果這樣寫(xiě)的話(huà)，就需要對(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í)行中斷l(xiāng)et?pageInfo?=?await?getPageInfo(userInfo?.userId)
}logined()
復(fù)制代碼

一般我們?cè)陧?xiàng)目里都是用 axios 或者 fetch 之類(lèi)發(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í)中斷，可以這樣寫(xiě)，需要做非空校驗(yàn)，控制臺(tái)不會(huì)有報(bào)錯(cuò)信息

let?userInfo?=?await?getUserInfo().catch(e?=>?console.warn(e))
if?(!userInfo)?return
復(fù)制代碼

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

try?{let?userInfo?=?await?getUserInfo()//?執(zhí)行中斷l(xiāng)et?pageInfo?=?await?getPageInfo(userInfo?.userId)
}?catch(e)?{console.warn(e)
}復(fù)制代碼

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

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)復(fù)制代碼

小結(jié)

幾種寫(xiě)法，初看可能覺(jué)得第三種 catch 這種寫(xiě)法是最好的，但是細(xì)想下，從用戶(hù)體驗(yàn)上來(lái)看，我覺(jué)得 try catch 是最好的，邏輯直觀(guān)、符合同步編程思維，控制臺(tái)不會(huì)暴露?uncaught (in promise)?報(bào)錯(cuò)信息；

而鏈?zhǔn)秸{(diào)用的 catch (里面再 reject)，是傳統(tǒng) promise 的回調(diào)寫(xiě)法，既然已經(jīng)用 async await 這種同步編程寫(xiě)法了，再用 catch 鏈?zhǔn)綄?xiě)法，感覺(jué)沒(méi)必要。

結(jié)語(yǔ)

我是考拉🐨，一個(gè)熱心的前端菜鳥(niǎo)程序員。如果你上進(jìn)，喜歡前端，想學(xué)習(xí)前端，那咱們可以交朋友，一起摸魚(yú)哈哈，摸魚(yú)群，關(guān)注我，拉你進(jìn)群，有5000多名前端小伙伴在等著一起學(xué)習(xí)哦 -->

作者：Ethan_Zhou
鏈接：https://juejin.cn/post/7213362932423376933
來(lái)源：稀土掘金

Node 社群

我組建了一個(gè)氛圍特別好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你對(duì)Node.js學(xué)習(xí)感興趣的話(huà)（后續(xù)有計(jì)劃也可以），我們可以一起進(jìn)行Node.js相關(guān)的交流、學(xué)習(xí)、共建。下方加 考拉 好友回復(fù)「Node」即可。

“分享、點(diǎn)贊、在看” 支持一波👍