您好,登录后才能下订单哦!
这篇文章主要介绍“如何使用async await处理错误”,在日常操作中,相信很多人在如何使用async await处理错误问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何使用async await处理错误”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
大家平时如果使用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
方法。
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
已经帮我们做了这件事,我们可以看看它是怎么做的,它的源码只有短短十几行,我们应该读读它的源码,学学它的思想
/** * @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处理错误”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。