關於async和await語句的用法

async是es8的新語法：

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

 

async function timeout() { return 'hello world' } console.log(timeout()); console.log('雖然在后面，但是我先執行');

 輸出結果：

可以看出async函數返回的是promise函數，所以如果想調用輸出結果可以直接用then語句，你可能注意到控制台中的Promise 有一個resolved，這是async 函數內部的實現原理。如果async 函數中有返回一個值 ,當調用該函數時，內部會調用Promise.solve() 方法把它轉化成一個promise 對象作為返回

async function timeout() { return 'hello world' } timeout().then(result => { console.log(result); }) console.log('雖然在后面，但是我先執行');

輸出結果：

傳入resault，再輸出

async 關鍵字差不多了，我們再來考慮await 關鍵字，await是等待的意思，那么它等待什么呢，它后面跟着什么呢？其實它后面可以放任何表達式，不過我們更多的是放一個返回promise 對象的表達式。注意await 關鍵字只能放到async 函數里面

 

　　現在寫一個函數，讓它返回promise 對象，該函數的作用是2s 之后讓數值乘以2

// 2s 之后返回雙倍的值
function doubleAfter2seconds(num) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(2 * num)
        }, 2000);
    } )
}

　　現在再寫一個async 函數，從而可以使用await 關鍵字， await 后面放置的就是返回promise對象的一個表達式，所以它后面可以寫上 doubleAfter2seconds 函數的調用

async function testResult() {
    let result = await doubleAfter2seconds(30);
    console.log(result);
}

　　現在調用testResult 函數

testResult();

　　打開控制台，2s 之后，輸出了60. 

　　現在我們看看代碼的執行過程，調用testResult 函數，它里面遇到了await, await 表示等一下，代碼就暫停到這里，不再向下執行了，它等什么呢？等后面的promise對象執行完畢，然后拿到promise resolve 的值並進行返回，返回值拿到之后，它繼續向下執行。具體到 我們的代碼, 遇到await 之后，代碼就暫停執行了， 等待doubleAfter2seconds(30) 執行完畢，doubleAfter2seconds(30) 返回的promise 開始執行，2秒 之后，promise resolve 了， 並返回了值為60， 這時await 才拿到返回值60， 然后賦值給result， 暫停結束，代碼才開始繼續執行，執行 console.log語句。

　　就這一個函數，我們可能看不出async/await 的作用，如果我們要計算3個數的值，然后把得到的值進行輸出呢？

async function testResult() {
    let first = await doubleAfter2seconds(30);
    let second = await doubleAfter2seconds(50);
    let third = await doubleAfter2seconds(30);
    console.log(first + second + third);
}

　　6秒后，控制台輸出220, 我們可以看到，寫異步代碼就像寫同步代碼一樣了，再也沒有回調地域了。