大家好，欢迎来到IT知识分享网。

前台经常会遇到请求同步和异步的问题，今天咱们来聊一聊vue中同步请求和异步请求那些事儿。

说到接口的请求同步和异步问题，最早接触Ajax中就存在，Ajax传递的参数有一个async，默认情况下是false，也就是异步传输的，如果想阻塞浏览器的线程，将接口请求依次进行的化，需要将async参数设置为true。

到了es6时出现了Promise，这让我们脱离了需要多次回调的情况，到了es7时出现了async-await，那么async-await又有什么神奇之处呢？

Promise

Promise的出现是为了防止前台的进程被冻结，它的出现可以允许多个任务同时进行，也就是所谓的异步操作。

Promise主要用处在以下几点

• 1. 用于异步处理操作

• 2. 将异步操作队列化，按照顺序执行操作，并返回相应结果

• 3. 在对象之间传递和操作promise，帮助处理队列中的操作方法

异步操作的主要用途包括事件的监听和事件的回调。自从前台使用nodejs进入常态化之后，无阻塞的处理高并发成为了重中之重，也就是处理好异步操作。

Promise的一个简单示例

其中resolve返回成功的结果，reject返回失败的结果。

这个简单例子模拟promise的异步操作，2秒钟后返回hello world。

Promise.all() 可以批量执行

返回结果可以看出，两个方法依次异步执行，等全部执行完毕后，一起输出结果，这在实际业务中相当有用！！！

Async-await

那么既然es6中已经有promise了，也相当好用，为什么在es7中又出现了async-await呢？

其实async-await是基于promise的，它是promise和generator的语法糖。Async-await可以让我们在使用promise时更加流畅，代码更加简洁。

Await不能够单独使用，它必须出现在async作用的方法中。从字面意思也可以看的出，wait就是等待的意思，也就是等着我执行完毕，相当于将异步方法同步化。

下面是一个async-await的小栗子

从执行的结果可以看出，浏览器执行async-await的顺序为，正常的表达式顺序执行，遇到promise的异步线程时，需要等待异步线程返回结果，然后顺序执行后面的方法，这样就可以将异步的方法同步化了。

如果顺序执行多个任务的话，可以明显看出async-await的优势了，代码如下：

Axios中使用async-await进行同步化

在VueCLI3.0项目中集成axios进行后台接口的请求数据，有时候需要等待返回数据然后再进行下一步操作，如果是用ajax进行访问数据的话可以这样

直接设置async参数为false即可。

然而axios没有ajax这样直接设置的参数，那怎么办呢？

所以就可以使用之前说到的async-await了，也就是使用 async-await 将 axios 异步请求同步化。

下面一个简单的栗子

如果将返回的结果做不同处理的话，以可嵌套一次promise，如下

小结

通过这一篇的讲解，讲述了前端程序的异步，包括promise的原理，用处，以及后来的async-await，并且了解了async-await的作用，最后将async-await用到了axios实例中，来解决axios的异步请求同步化问题。

希望这篇文章对前台异步请求同步化问题有困扰的朋友带来帮助。

感兴趣的可以加关注，谢谢！