不要一直使用try-catch啦！三種async/await錯(cuò)誤捕獲方式
Hello，大家好，我是 Sunday。
async + await 可以讓 異步的操作擁有同步的寫法。所以在日常開發(fā)中，通過 async + await 來處理異步編程（比如：接口請(qǐng)求）是非常常見的一種方案。
但是，只要是異步操作，那么就會(huì)存在出現(xiàn) 錯(cuò)誤 的可能。當(dāng) promise 出現(xiàn)錯(cuò)誤時(shí)，我們可以直接通過 .catch 的方式進(jìn)行捕獲，那么 async + await 應(yīng)該怎么做呢？每次都使用 try-catch 進(jìn)行完整的包裹嗎？有沒有更好地方案呢？
今天這篇文章，咱們就來說下這個(gè)問題~
01：使用 try/catch 進(jìn)行捕獲
function getUserInfo() {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject('請(qǐng)求出現(xiàn)錯(cuò)誤')
}, 1000)
})
}
async function loggedIn() {
try {
// 執(zhí)行中斷
let userInfo = await getUserInfo()
console.log('不會(huì)繼續(xù)執(zhí)行')
} catch(e) {
console.log(e)
}
}
loggedIn()上面的代碼在執(zhí)行時(shí)，會(huì)通過 try-catch 捕獲到“請(qǐng)求異?！辈⒅袛鄨?zhí)行g(shù)etUserInfo。這也是日常開發(fā)中常見處理方式。
但是如果我們存在多次的請(qǐng)求，就必須要通過多次的 try-catch 進(jìn)行捕獲，特別是在請(qǐng)求需要具備連續(xù)性的時(shí)候：
async function loggedIn() {
try {
let userInfo = await getUserInfo()
console.log('不會(huì)繼續(xù)執(zhí)行')
let pageInfo = await getPageInfo(userInfo?.userId)
} catch(e) {
console.warn(e)
}
}
loggedIn()這樣的處理，在當(dāng)前場(chǎng)景下并沒有什么問題，但是如果每一個(gè)接口的請(qǐng)求都這么進(jìn)行調(diào)用，那么就會(huì)顯得冗余了。所以，我們就可以延伸出一些其他的處理方案。
02：直接捕獲
function getUserInfo() {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject('請(qǐng)求出現(xiàn)錯(cuò)誤')
}, 1000)
})
}
async function loggedIn() {
let userInfo = await getUserInfo().catch(e => console.log(e))
console.log('程序會(huì)繼續(xù)執(zhí)行')
if (!userInfo) return
let pageInfo = await getPageInfo(userInfo?.userId)
}
loggedIn()在上面的代碼中，我們通過 catch捕獲了異常，但程序會(huì)繼續(xù)執(zhí)行，所以我們只需要在后續(xù)進(jìn)行 if 判斷，從而完成連續(xù)的邏輯。
如果你不希望程序繼續(xù)執(zhí)行，那么可以按照下面的方式進(jìn)行處理
function getUserInfo() {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject('請(qǐng)求出現(xiàn)錯(cuò)誤')
}, 1000)
})
}
async function loggedIn() {
let userInfo = await getUserInfo().catch(e => {
console.log(e)
return Promise.reject(e)
})
console.log('程序不會(huì)繼續(xù)執(zhí)行')
let pageInfo = await getPageInfo(userInfo?.userId)
}
loggedIn()這種方式會(huì)執(zhí)行通過 在catch塊中的Promise.reject(e)來中斷執(zhí)行。
如何選擇？
1、如果錯(cuò)誤不需要中斷程序執(zhí)行，那么可以使用如下方式
let userInfo = await getUserInfo().catch(e => console.log(e))
if (!userInfo) return2、如果發(fā)生錯(cuò)誤時(shí)需要中斷，并且通過控制臺(tái)明確一個(gè)統(tǒng)一的錯(cuò)誤
try {
let userInfo = await getUserInfo()
console.log('不會(huì)繼續(xù)執(zhí)行')
let pageInfo = await getPageInfo(userInfo?.userId)
} catch(e) {
console.warn(e)
}3、如果發(fā)生錯(cuò)誤時(shí)需要中斷，但是不需要控制臺(tái)顯示統(tǒng)一的錯(cuò)誤
let userInfo = await getUserInfo().catch(e => {
console.log(e)
return Promise.reject(e)
})
console.log('程序不會(huì)繼續(xù)執(zhí)行')
let pageInfo = await getPageInfo(userInfo?.userId)
