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