體驗異步的終極解決方案-ES7的Async/Await

閱讀本文前，期待您對promise和ES6(ECMA2015)有所瞭解，會更容易理解。本文以體驗爲主，不會深入說明，結尾有詳細的文章引用。

第一個例子

Async/Await應該是目前最簡單的異步方案了，首先來看個例子。這裏我們要實現一個暫停功能，輸入N毫秒，則停頓N毫秒後才繼續往下執行。

var sleep = function (time) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            resolve();
        }, time);
    })
};

var start = async function () {
    // 在這裏使用起來就像同步代碼那樣直觀
    console.log('start');
    await sleep(3000);
    console.log('end');
};

start();

控制檯先輸出start，稍等3秒後，輸出了end。

基本規則

1. async 表示這是一個async函數，await只能用在這個函數裏面。await 表示在這裏等待promise返回結果了，再繼續執行。await 後面跟着的應該是一個promise對象（當然，其他返回值也沒關係，只是會立即執行，不過那樣就沒有意義了…）

獲得返回值

await等待的雖然是promise對象，但不必寫.then(..)，直接可以得到返回值。

var sleep = function (time) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            // 返回 ‘ok’
            resolve('ok');
        }, time);
    })
};

var start = async function () {
    let result = await sleep(3000);
    console.log(result); // 收到 ‘ok’
};

捕捉錯誤

既然.then(..)不用寫了，那麼.catch(..)也不用寫，可以直接用標準的try catch語法捕捉錯誤。

var sleep = function (time) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            // 模擬出錯了，返回 ‘error’
            reject('error');
        }, time);
    })
};

var start = async function () {
    try {
        console.log('start');
        await sleep(3000); // 這裏得到了一個返回錯誤
        
        // 所以以下代碼不會被執行了
        console.log('end');
    } catch (err) {
        console.log(err); // 這裏捕捉到錯誤 `error`
    }
};

循環多個await

await看起來就像是同步代碼，所以可以理所當然的寫在for循環裏，不必擔心以往需要閉包才能解決的問題。

..省略以上代碼

var start = async function () {
    for (var i = 1; i <= 10; i++) {
        console.log(`當前是第${i}次等待..`);
        await sleep(1000);
    }
};

值得注意的是，await必須在async函數的上下文中的。

..省略以上代碼

let one2ten = [1,2,3,4,5,6,7,8,9,10];

// 錯誤示範
one2ten.forEach(function (v) {
    console.log(`當前是第${v}次等待..`);
    await sleep(1000); // 錯誤!! await只能在async函數中運行
});

// 正確示範
for(var v of one2ten) {
    console.log(`當前是第${v}次等待..`);
    await sleep(1000); // 正確, for循環的上下文還在async函數中
}