async和await异步捕获机制try/catch

async 是 js 有史以来最简单的异步写法,能够用同步的方式来处理异步函数。但是其中对于错误的处理一不小心就会忽略掉,特别是目前公司使用的weex 作为开发框架,本身的debug的处理极其有限并且不便,当在项目中使用了大量的await / async语句并且没有捕获机制的话,代码很容易就产生错误并且影响程序的正常运行。

var fn = function(type,msg){
 return new Promise((res,rej) => {
    if(type){
      res(`success${msg}`)
     }else{
      rej(`fail!${msg}`)
     }
  })
}

async function asyfn(){
      var result1 = await fn(false, 'hello')
      console.log('中间内容输出')
      var result2 = await fn(false, 'world')
}
asyfn();

 

这时代码由于没有捕获错误机制,会导致运行到第一个await 语句就会报错,中间内容就没有输出。

我们进行以下几种错误处理的方法:

try catch

async function asyfn(){
  try{
      var result1 = await fn(false, 'hello');
      console.log('中间内容输出');
      var result2 = await fn(false, 'world');
      console.log(result1,result2); 
    }catch(e){
        console.log('catch',e)
   }
}

asyfn();

我们在异步函数async里面加上try/catch,这时async 里面运行的promise 会被catch捕获到,程序没有报错。但是还是影响了代码的正常运行,因为 中间输出内容 并没有打印出来,直接输出了result1 的异常结果。

 

调用函数进行catch 捕获

因为 async 函数本身返回的是一个promise,我们可以用 .then()/.catch() 方法 捕获内部promise 产生的错误,结果与try catch 捕获的报错信息一样

 

在内部用catch 捕获

在内部的时候,可以为每个promise 都进行一个catch 捕获,这样的话可以保证每个异步流程的错误都可以被抓到,并且不会影响其他代码的运行。

  async function asyfn(){
    var result1 = await fn(false, 'hello').catch(err => console.log(err))
    console.log('中间内容输出');
    var result2 = await fn(false, 'world').catch(err => console.log(err))
    console.log('结尾内容输出');
  }
  asyfn();

 

综上所述,建议每一个promise都使用 catch 进行捕获,不会影响流程,缺点是 比较繁琐,每一个异步流程都要进行错误处理

posted @ 2020-05-09 09:01  JackieDYH  阅读(19)  评论(0编辑  收藏  举报  来源