如何优雅的使用async与await,附带错误处理

es7加入的异步处理async与await,让promise的操作更加的简洁且优雅
例如,当在一个常见的axios请求中获取数据时:
- 传统的promise写法
- ```
getxxx(){
  this.$http.post(url,param)
  .then(res=>{
    console.log(res.data);
  })
  .catch(err=>{
    console.log(err);
  })
}
```
- 这当然非常好用,且思路清晰,但是当我们一个项目中有很多的接口以及需要发出的请求越来越多时,这样的写法还是会让人觉得有些许的臃肿以及不够优雅
- es7的async,await写法
- ```
async getxxx(){
  const {data} = await this.$http.post(url,param)
  console.log(data);
}
```
- 这样看起来就显得相当的简洁且优雅
但是在实际开发中会遇到一些问题,当我们在学习阶段使用axios发送请求的时候,往往只会考虑成功的回调而忽略了异常的回调,实际的开发中,为了用户用更好的体验,出现异常时我们也需要在用户界面能有一个明显的提示信息,而不是用户在等待却没有任何的内容

下面介绍简单的async处理异步时的异常处理

使用try....catch的代码块来捕获异常,上述的async,await能够更加的完善

async getxxx(){
    try {
        const {data} = await this.$http.post(url,param)
        console.log(data)
    }catch(err){
        console.log(err)
    }
}

这样看起来很不错,但是在实际开发中,每使用一次async就需要写一次try,catch也显得有些臃肿且不够优雅,即使是在java的代码中,我也不会很多的去使用try...catch,所以多次使用try...catch会显得很突兀,在网上看了很多的内容,也看到的更加优秀的解决方案.
- 我们始终要知道await后面等待的是一个promise,我们可以试试在async的函数中不加await,同时打印结果看看.
- 既然await本身等待的就是一个promise,所以对于统一的异常捕获提供了这样一个思路,在await等到promise之前,我们首先自己封装一个函数,对当前的promise统一进行一个正确获取异常的处理
- ```
export default function handle(promise){
  return promise.then(data=>{
    return data
  }).catch(err=>{
    return err
  })
}
```
- 封装了这样一个函数之后,我们就可以使用它对await等待的promise做一次处理
- ```
async getxxx(){
    const {err,data} = await handle(this.$http.post(url,param))
    if(err) console.log(err)
    console.log(data)
}
```
上面的示例只是该解决方案的一个简单用例，您可以在handle方法的js文件内附加拦截器，该方法将接收原始错误对象，对其进行记录或在将其传回之前进行任何必要的处理。