使用async await处理错误方法示例
作者：Sunshine_Lin
这篇文章主要为大家介绍了使用async await处理错误的方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
Promise封装请求
大家平时如果使用Promise封装请求，那么当你使用这个请求函数的时候是这样的：
// 封装请求函数
const request = (url, params) => {
return new Promise((resolve, reject) => {
// ...do something
})
}
// 使用时
const handleLogin = () => {
request(
'/basic/login',
{
usename: 'sunshine',
password: '123456'
}
).then(res => {
// success do something
}).catch(err => {
// fail do something
})
}
可以看到，当你的请求成功时，会调用then方法，当你的请求失败时会调用catch方法。
async/await
Promise的出现解决了很多问题，但是如果请求多了且有顺序要求的话，难免又会出现嵌套的问题，可读性较差，比如：
const handleLogin = () => {
request(
'/basic/login',
{
usename: 'sunshine',
password: '123456'
}
).then(res => {
// 登录成功后获取用户信息
request(
'/basic/getuserinfo',
res.id
).then(info => {
this.userInfo = info
}).catch()
}).catch(err => {
// fail do something
})
所以这个时候async/await出现了，他的作用是：用同步的方式执行异步操作，上面的代码使用async/await的话可以改写成：
const handleLogin = async () => {
const res = await request('/basic/login', {
usename: 'sunshine',
password: '123456'
})
const info = await request('/basic/getuserinfo', {
id: res.id
})
this.userInfo = info
}
这样的话代码的可读性比较高，而不会出现刚刚的嵌套问题，但是现在又有一个问题了，Promise有catch这个错误回调来保证请求错误后该做什么操作，但是async/await该如何捕获错误呢？
await-to-js
其实已经有一个库await-to-js已经帮我们做了这件事，我们可以看看它是怎么做的，它的源码只有短短十几行，我们应该读读它的源码，学学它的思想
源码很简单
/**
* @param { Promise } 传进去的请求函数
* @param { Object= } errorExt - 拓展错误对象
* @return { Promise } 返回一个Promise
*/
export function to(
promise,
errorExt
) {
return promise
.then(data => [null, data])
.catch(err => {
if (errorExt) {
const parsedError = Object.assign({}, err, errorExt)
return [parsedError, undefined]
}
return [err, undefined]
})
}
export default to
源码总结：to函数返回一个Promise且值是一个数组，数组之中有两个元素，如果索引为0的元素不为空值，说明该请求报错，如果索引0的元素为空值说明该请求没有报错，也就是成功。
使用很简单
我们该怎么去使用这个to函数呢？其实很简单，还是刚刚的例子
const handleLogin = async () => {
const [resErr, res] = await to(request('/basic/login', {
usename: 'sunshine',
password: '123456'
}))
if (resErr) {
// fail do somthing
return
}
const [userErr, info] = await to(request('/basic/getuserinfo', {
id: res.id
}))
if (userErr) {
// fail do somthing
return
}
this.userInfo = info
}
所以说，偶尔看看一些库的源码，还是能学到东西的！！！
以上就是使用async await处理错误方法示例的详细内容，更多关于async await处理错误的资料请关注脚本之家其它相关文章！