ES6 async/await在项目中的应用

最近在项目中有这么一个需求，当用户使用积分去兑换某个商品之后，点击某个按钮会调用两个接口，其中先调用一个接口，从接口中获取record_id之后，再调用另外一个接口，将获得的record_id传递到第二个接口中，然后从第二个接口返回goods_name，那么我们来看一下用以前的方式和使用ES6的async/await方式来编写的不同。
一开始，我使用的方式如下

apis.postExchangeGoods({},{goods_id: this.current_goods.id})
  .then(res => {
    if (res.data.errcode === 0) {
      let record_id = res.data.record_id;
      apis.postUserInfo({},{record_id: record_id})
        .then(res => {
          this.show = false;
          let goods_name = res.data.goods_name;
          this.$router.push({ 
            name: 'xxx'
          });
        });
      });
    }
});

可以看到这种方式下，在一个接口的回调中调用另一个接口，代码不仅多，看起来也比较杂乱，而且此时只是调用2个接口，如果在某些需求下我们要调用四五个接口甚至十个接口，那么此时代码不仅看起来特别乱，而且会各种回调接口的嵌套，维护起来也不方便，掉入传说中的callback hell。而es6中推出async/await函数就可以解决这种问题，我们来看一下使用这种方式后写出来的代码：

1.async function postUserInfo() {
2.  try {
3.    var result1 = await window.apis.postExchangeGoods({}, {goods_id: _this.goods_id});
4.    var result2 = await window.apis.postUserInfo({},{record_id:resul1.data.rescord_id});
5.    return result2.data.goods_name;
6.  } catch(e) {
7.    console.log(e);
8.  }
9.}

10.postUserInfo().then((goods_name) => {
11.  this.$router.push({ 
12.    name: 'xxx'
13.  });
14.});

第二种写法需要使用async function去定义一个方法，那么这个方法最后会返回一个Promise对象。
在这个方法中调用那两个接口，第3行代码中使用了await命令，那么此时该方法会等待第3行的异步操作执行完毕之后，才会继续执行下面的代码，如果由于网络问题该postExchangeGoods请求了5秒，那么代码就会在这里等待5秒，直到获取返回结果，然后再执行下面的代码。

当async方法里面的内容全部执行完毕之后，就会调用第10行中的then指定的回调方法。

需要注意的是：await后面跟着的函数，必须通过Promise.resolve或者Promise.reject来返回某些内容

我们对比一下这两种写法，可以看得出，第二种方法首先代码比较简洁，调用两个接口只写了第3行和第4行代码，然后用一个变量来获取返回的结果。而且更重要的是，他脱离了第一种写法的那种几个回调函数嵌套的现象，代码变得更清晰，维护起来也更好。当然，由于async/await是es6中推出的API，使用babel并不能将其转译为大部分浏览器支持的ES5，此时我们需要使用垫片。

ES6 async/await在项目中的应用

猜你喜欢