前言

无意间看到了一个await错误处理的第三方npm包await-to-js 然后看了源码也不难就自己写了一个对应的js,并用在当前公司的项目的上一个迭代里,拖到今天来做一个分享

为什么需要做await的错误处理

项目足够复杂的时候通常一个async方法里存在多个await 如果await的错误不捕获会导致整个async函数的中断,进而导致页面数据错误的问题,展示在用户面前的就是白屏

举个? 页面组件初始化(比如:componentDidMount)的时候要init很多数据

获取初始化filter条件
获取某权限状态
获取数据列表

async componentDidMount(){
  //假如 getFilter内部发生了错误 那么整个async就中断了
  await  getFilter()
  await  getSomeAuth()
  await  getSomeList()
}
复制代码

常规的错误捕获的处理

try{
  await  getFilter()
}catch(err){
 throw new Error(err)
}
try{
  await  getSomeAuth()
}catch(err){
 throw new Error(err)
}
try{
  await  getSomeList()
}catch(err){
 throw new Error(err)
}

复制代码

写到这里或许有小伙伴会问那为什么不用一个try,catch包裹 ,但用一个try,catch 我们就无法准确的知道是哪个await出错了

结合当前项目的axios 的封装进行await错误捕获

axios的二次封装位置
util.js的封装

export function to(promise: Promise<unknown>) {
  // await 后面 我们封装了的接口函数是一个promise 那么就能通过链式调用catch 和then
  return promise
    .then((result) => {
    //当正确执行的时候 返回一个数组,err为空,result就是成功返回值
      return [null, result]
    })
    //await 错误时 只返回对应的错误
    .catch((err) => [err])
}
复制代码

3.调用

//路径别名 webpck里做对应的配置
import {testApi} from '@api'
import {  to } from '@util'

async componentDidMount(){
 const [err，result] await  getFilter()
 if(err){
     console.log(`getFilter ${err}`)
     return
 }
 const {success, data,msg}=result
 if(!success){ 
    //这里的msg 通常是 后端返回的检验错误,具体详情见axios的封装
     console.log(msg)
     return
 }
     console.log({data})

// getSomeAuth()和getSomeList() 同理可得
}
复制代码