前臺經常會遇到請求同步和異步的問題，今天咱們來聊一聊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的異步請求同步化問題。

希望這篇文章對前臺異步請求同步化問題有困擾的朋友帶來幫助。

感興趣的可以加關注，謝謝！

總結

以上是生活随笔為你收集整理的@async 没有异步_扒一扒VueCLI3.0中Axios异步请求同步化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。