阅读 171

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该如何捕获错误呢?

async-to-js

其实已经有一个库async-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 } 复制代码

所以说,偶尔看看一些库的源码,还是能学到东西的!!!


作者:Sunshine_Lin
链接:https://juejin.cn/post/7064389512729722910

文章分类
代码人生
文章标签
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐