ES6和Vue 常用問題總結

ES6

用 async/await 來處理異步和Promise

async

先說一下async的用法，它作爲一個關鍵字放到函數前面，用於表示函數是一個異步函數，因爲async就是異步的意思， 異步函數也就意味着該函數的執行不會阻塞後面代碼的執行。 寫一個async 函數

export default {
        name: 'home',
        components: {},
        data() {
            return {}
        },
        methods: {
            async test3() {
                return "33";
            }
        },
        mounted() {
            console.info(this.test3())
            this.test3().then(result=>{
                console.info(`我輸出了${result}`)
            });
            console.info("我在你後面")
        }
    }

控制檯打印

async 函數返回的是一個promise 對象，如果async 函數中有返回一個值 ,當調用該函數時，內部會調用Promise.solve() 方法把它轉化成一個promise 對象作爲返回，但如果timeout 函數內部拋出錯誤呢？ 那麼就會調用Promise.reject() 返回一個promise 對象

Promise

看完async的實現是不是和Promise很相似，如何用Promise實現，如下圖所示

控制檯輸出結果

await

現在寫一個函數，讓它返回promise 對象，該函數的作用是5s 之後在執行下邊的函數
下邊延時test5implPromise是可以的，test5implAsync沒有獲取正確值，可能因爲沒有拿到定時器的返回值

控制檯輸出結果

現在我們看看代碼的執行過程，調用test5函數，它裏面遇到了await, await 表示等一下，代碼就暫停到這裏，不再向下執行了，它等什麼呢？等後面的promise對象執行完畢，然後拿到promise resolve 的值並進行返回，返回值拿到之後，它繼續向下執行

axios函數利用async/await

第一種是將test和test1函數變成了Promise，所以同步的是test和test1函數，不是同步的axios函數

控制檯輸出結果