Vue中async和await的使用

 

在使用vue中如果返回的值是一个Promise对象，那我们就可以用async和await简化这段代码

        async是作为一个关键词放在函数的最前面，而await是放在async函数里面的，async表示这个函数是异步的，await是等待的意思，它的后面我们一般都放返回值是一个Promise对象的函数。

使用async函数返回的一定是个Promise对象，而await的作用就是等待这个对象执行完毕，并且接收到返回值的时候才会继续执行下一步，在此之前就像暂停了一样，没有接收到返回值是不会进行下一步的，但是它在等待的时候并没有妨碍async函数外面的代码执行。

如果两个函数都使用async但是不使用await两个函数之间还有调用关系，那输出结果会如何

在输出1，2，3，4的时候我们会发现，顺序变了，虽然最后还是拿到了返回的数据，但是是在全部执行完毕之后才返回数据，这个就能说明问题了，因为我们在还没有拿到数据做校验的时候，页面已经提示成功了。说明左边的函数是不会等右边的异步函数返回结果之后在执行。

如果加上await效果如下

在这个图片中执行顺序正常了，因为在右边的函数中，由于加上了await，当执行到这一步的时候，他不会立即返回，而是会等待这个函数执行完毕返回结果之后才会跳转到左边的函数中继续执行下一步，所以如果使用async函数的话，要记得加上await。

可以的出一个结论，async是一个异步函数，但是await配合async一起使用后，就相当于把异步函数变成了同步，因为await会等待他后面的表达式返回结果之后才执行下一步。