ES7的Async/Await

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只能用在這個函數裏面。

2. await 表示在這裏等待promise返回結果了，再繼續執行。

3. 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 一到十 = [1,2,3,4,5,6,7,8,9,10]; // 錯誤示範 一到十.forEach(function (v) { console.log(`當前是第${v}次等待..`); await sleep(1000); // 錯誤!! await只能在async函數中運行 }); // 正確示範 for(var v of 一到十) { console.log(`當前是第${v}次等待..`); await sleep(1000); // 正確, for循環的上下文還在async函數中 }