async/await如何优雅的处理错误

1.当我们使用Promise做异步操作时，我们可能因为逻辑关系不得不陷入回调地狱当中。

使用Promise封装请求，使用请求函数的时候是这样的：

    login(){
      request(
        '/login',
        {
          usename: 'admin',
          password: '123456!!!'
        }
      ).then(res => {
        request(
          '/getuser',
          res.id
        ).then(data => {
          this.userInfo = data
          // 单独/getuser处理错误
        },err=>{})
      }).catch(err => {
        // 只要/login或者/getuser接口报错都会回调
      })
    }

2.那么现在我们可以使用async/await。我们可以用 同步的方法执行异步，可以对上面的代码经行优化

    async login(){
      const res = await request('/login', {
        usename: 'admin',
        password: '123456!!!'
      })
      const data = await request('/getuser', {
        id: res.id
      })
      this.userInfo = data
    }

3.有的同学可能有疑问了。那async/await如何去捕抓错误呢？

接下来就是我想给大家讲的（发现了一个很好的处理async/await错误捕抓的插件）。

await-to-js

npm i await-to-js --save    //安装


import to from 'await-to-js';   //引入

然后我们只需要把异步的操作放到to这个方法里面

例如：

    async login() {
      const [err, res] = await to(request('/login', {
        usename: 'admin',
        password: '123456!!!'
      }))
      // 失败
      if (err) {
        return
      }
      const [userErr, data] = await to(request('/getuser', {
        id: res.id
      }))
      // 失败
      if (userErr) {
        return
      }
      this.userInfo = data
    }

那么我们就可以操作对应接口报错时候的操作啦！

当然如果我们想对统一的错误进行处理的话我们可以考虑使用try/catch