20190611-對async和await的一點理解

首先看下這段代碼：

async function submit(){
    console.log('請求開始！')
    
    let data = await fetch('127.0.0.1:8888')
        .then(res => res.json())
        .then(res => {
            console.log('請求成功！')
            return res
        })
        
    console.log('請求結束')；
}

console.log('請求成功了麼？')；

執行這這段代碼，你會發現控制板輸出的數據順序

'請求成功了麼？'
'請求開始！'
'請求成功！'
'請求結束！'

async

定義

MDN:

async function 聲明用於定義一個返回 AsyncFunction 對象的異步函數。異步函數是指經過事件循環異步執行的函數，它會經過一個隱式的 Promise 返回其結果。可是若是你的代碼使用了異步函數，它的語法和結構會更像是標準的同步函數。

通俗的講，就是「異步」。讓這個fn支持異步繼續，因此首先打印出來的是

'請求成功了麼？'

async利用了影藏的promise對象，來控制函數異步進行，因此你在執行async中，console會出來一個promise對象。

同時須要搭配await來阻塞內部異步，來說操做

await

定義

MDN：

await表達式會暫停當前「async function」的執行，等待Pormise處理完成，若Promise正常處理，則回調的resolve函數做爲await表達式的值，繼續進行async function。

表達式

一個 Promise 對象或者任何要等待的值。

返回值

返回 Promise 對象的處理結果。若是等待的不是 Promise 對象，則返回該值自己。

因此上面代碼，內部的執行順序是

async function submit(){
    // 開始執行
    console.log('請求開始！')
    
    // 遇到await，等待處理結果
    let data = await fetch('127.0.0.1:8888')
        .then(res => res.json())
        .then(res => {
            // 處理完成，返回處理結果
            console.log('請求成功！')
            return res
        })
    
    // 等待await處理完成後，執行。
    console.log('請求結束')；
}

注意：若是返回值不是Promise，則把該值轉換爲已常常處理的Promise，等待處理結構（就是拋出該值）

async function f2() {
  var y = await 20;
  console.log(y); // 20
}
f2();

應用場景

await能夠阻塞主函數，直到後面的Promise對象處理完成，這就很容易的解決了按順控制異步操做。

• 當B請求必需要A請求完成後，才能根據A請求的結果，進行是否繼續請求B的時候
• 根據全部請求完成後，進行統計請求成功、失敗數量等
• 異步操做最後的回調