async/await 异步捕获机制

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();

image-20190319190719532.png

这时代码由于没有捕获错误机制，会导致运行到第一个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 的异常结果。

image-20190319191508657.png

调用函数进行catch 捕获

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

image-20190319191959625.png

在内部用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();

image-20190319192451873.png

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