前臺經常會遇到請求同步和異步的問題，今天咱們來聊一聊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的異步請求同步化問題。
希望這篇文章對前臺異步請求同步化問題有困擾的朋友帶來幫助。
感興趣的可以加關注，謝謝！
