async + await 可以让异步的操作拥有同步的写法。所以在日常开发中,通过 async + await 来处理异步编程(比如:接口请求)是非常常见的一种方案。但是,只要是异步操作,那么就会存在出现 错误 的可能。当 promise 出现错误时,我们可以直接通过 .catch 的方式进行捕获,那么 async + await 应该怎么做呢?每次都使用 try-catch 进行完整的包裹吗?有没有更好地方案呢?
1. 使用 try/catch 进行捕获
function getUserInfo() {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject('请求出现错误')
}, 1000)
})
}
async function loggedIn() {
try {
// 执行中断
let userInfo = await getUserInfo()
console.log('不会继续执行')
} catch(e) {
console.log(e)
}
}
loggedIn()
上面的代码是日常开发中常见处理方式。但是如果我们存在多次的请求,就必须要通过多次的 try-catch 进行捕获,如果每一个接口的请求都这么进行调用,那么就会显得冗余了。所以,我们就可以延伸出一些其他的处理方案。
2. 直接捕获
function getUserInfo() {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject('请求出现错误')
}, 1000)
})
}
async function loggedIn() {
let userInfo = await getUserInfo().catch(e => console.log(e))
console.log('程序会继续执行')
if (!userInfo) return
console.log('这里不会继续执行')
}
loggedIn()
在上面的代码中,我们通过 catch 捕获了异常,但程序会继续执行,我们只需要在后续进行 if 判断,就可以阻断程序的继续执行。
3. 直接捕获: return Promise.reject
如果你不希望程序继续执行,那么也可以按照下面的方式进行处理,这种方式会通过在 catch 块中的 Promise.reject(e) 来中断执行。
function getUserInfo() {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject('请求出现错误')
}, 1000)
})
}
async function loggedIn() {
let userInfo = await getUserInfo().catch(e => {
console.log(e)
return Promise.reject(e)
})
console.log('程序不会继续执行')
}
loggedIn()