用 async/await 來處理異步

使用 async / await, 搭配 promise, 能夠經過編寫形似同步的代碼來處理異步流程, 提升代碼的簡潔性和可讀性.

1.async

在函數前面加上async關鍵字能夠定義一個 異步函數, 語法爲:

async function name([param[, param[, ... param]]]) { statements }

例：

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

打開瀏覽器控制檯：

async 函數 timeout  調用了，可是沒有任何輸出，它不是應該返回 'hello world',  先不要着急， 看一看timeout()執行返回了什麼？ 把上面的 timeout() 語句改成console.log(timeout())

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

控制檯：

原來async 函數返回的是一個promise 對象，若是要獲取到promise 返回值，咱們應該用then 方法， 繼續修改代碼：

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

控制檯：

若是timeout 函數內部拋出錯誤呢？ 那麼就會調用Promise.reject() 返回一個promise 對象， 這時修改一下timeout 函數：

async function timeout(flag) {
    if (flag) {
        return 'hello world'
    } else {
        throw 'my god, failure'
    }
}
console.log(timeout(true))  // 調用Promise.resolve() 返回promise 對象。
console.log(timeout(false)); // 調用Promise.reject() 返回promise 對象。

控制檯：

若是函數內部拋出錯誤， promise 對象有一個catch 方法進行捕獲：

timeout(false).catch(err => {
    console.log(err)
})

2.await

await 操做符用於等待一個 Promise 對象, 它只能在異步函數 async function 內部使用.

await 的使用語法很是簡單：

[return_value] = await expression;

其中 expression 是一個 Promise 對象或者任何要等待的值;

而 await expression 的執行結果有如下幾種狀況:

1. 若 expression 是一個 Promise 對象, 而且其以值 x 被 fulfilled, 則返回值爲 x.
2. 若 expression 是一個 Promise 對象, 而且其以異常 e 被 rejected, 則拋出異常 e.
3. 若 expression 不是 Promise 對象, 則會將 expression 處理成一個以 expression 值被 fulfilled 的 Promise 對象, 而後返回這個 Promise 對象的最終值 (即 expression 值).（ 這種用法沒太大意義, 所以實際使用時仍是儘可能在 await 後跟一個 Promise 對象.）

另外須要注意的是, await 在等待 Promise 對象時會致使 async function 暫停執行, 一直到 Promise 對象決議以後纔會 async function 繼續執行.

async function foo() {
    var a = await new Promise((resolve) => {
        setTimeout(() => {
            resolve(1);
        }, 2000);
    });
    console.log(a); // 第2秒時輸出: 1

    try {
        var b = await new Promise((resolve, reject) => {
            setTimeout(() => {
                reject(2);
            }, 1000);
        })
    } catch (e) {
        console.log(e); // 第3秒時輸出: 2
    }

    // 函數暫停2秒後再繼續執行
    var sleep = await new Promise((resolve) => {
        setTimeout(() => {
            resolve('sleep');
        }, 2000);
    });

    var c = await 3;
    console.log(c); // 第5秒時輸出: 3
}

foo();

參照：http://www.javashuo.com/article/p-ogxfiwfh-z.html

          http://www.javashuo.com/article/p-oztayxcm-dc.html