異步神器async-await

轉載

作者：一步

位址：ES6系列文章 異步神器async-await

關于異步處理，ES5的回調使我們陷入地獄，ES6的Promise使我們脫離魔障，終于、ES7的async-await帶我們走向光明。今天就來學習一下 async-await。

async-await和Promise的關系

經常會看到有了

async-await、promise

還有必要學習嗎、

async await

優于

promise

的幾個特點，接收了這些資訊後，就蒙圈了。現在才知道，

async-await

是

promise

和

generator

的文法糖。隻是為了讓我們書寫代碼時更加流暢，當然也增強了代碼的可讀性。簡單來說：

async-await

是建立在

promise

機制之上的，并不能取代其地位。

基本文法

async function basicDemo() {
    let result = await Math.random();
    console.log(result);
}

basicDemo();
// 
//Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: undefined}
           

上述代碼就是async-await的基本使用形式。有兩個陌生的關鍵字async、await，同時函數執行結果似乎傳回了一個promise對象。

async

async用來表示函數是異步的，定義的函數會傳回一個promise對象，可以使用then方法添加回調函數。

async function demo01() {
    return ;
}

demo01().then(val => {
    console.log(val);// 123
});
若 async 定義的函數有傳回值，return ;相當于Promise.resolve(),沒有聲明式的 return則相當于執行了Promise.resolve();
           

await

await 可以了解為是 async wait 的簡寫。await 必須出現在 async 函數内部，不能單獨使用。

function notAsyncFunc() {
    await Math.random();
}
notAsyncFunc();//Uncaught SyntaxError: Unexpected identifier
           

await 後面可以跟任何的JS 表達式。雖然說 await 可以等很多類型的東西，但是它最主要的意圖是用來等待 Promise 對象的狀态被 resolved。如果await的是 promise對象會造成異步函數停止執行并且等待 promise 的解決,如果等的是正常的表達式則立即執行。

function sleep(second) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(' enough sleep~');
        }, second);
    })
}
function normalFunc() {
    console.log('normalFunc');
}
async function awaitDemo() {
    await normalFunc();
    console.log('something, ~~');
    let result = await sleep();
    console.log(result);// 兩秒之後會被列印出來
}
awaitDemo();
// normalFunc
// VM4036:13 something, ~~
// VM4036:15  enough sleep~
           

希望通過上面的 demo，大家可以了解我上面的話。

執行個體

舉例說明啊，你有三個請求需要發生，第三個請求是依賴于第二個請求的解構第二個請求依賴于第一個請求的結果。若用 ES5實作會有3層的回調，若用Promise 實作至少需要3個then。一個是代碼橫向發展，另一個是縱向發展。今天指給出 async-await 的實作哈~

//我們仍然使用 setTimeout 來模拟異步請求
function sleep(second, param) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(param);
        }, second);
    })
}

async function test() {
    let result1 = await sleep(, 'req01');
    let result2 = await sleep(, 'req02' + result1);
    let result3 = await sleep(, 'req03' + result2);
    console.log(`
        ${result3}
        ${result2}
        ${result1}
    `);
}

test();
//req03req02req01
//req02req01
//req01
           

錯誤處理

上述的代碼好像給的都是resolve的情況，那麼reject的時候我們該如何處理呢？

function sleep(second) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('want to sleep~');
        }, second);
    })
}

async function errorDemo() {
    let result = await sleep();
    console.log(result);
}
errorDemo();// VM706:11 Uncaught (in promise) want to sleep~

// 為了處理Promise.reject 的情況我們應該将代碼塊用 try catch 包裹一下
async function errorDemoSuper() {
    try {
        let result = await sleep();
        console.log(result);
    } catch (err) {
        console.log(err);
    }
}

errorDemoSuper();// want to sleep~
// 有了 try catch 之後我們就能夠拿到 Promise.reject 回來的資料了。
           

小心你的并行處理!!!

我這裡為啥加了三個感歎号呢~，因為對于初學者來說一不小心就将

ajax

的并發請求發成了阻塞式同步的操作了，我就真真切切的在工作中寫了這樣的代碼。

await

若等待的是

promise

就會停止下來。業務是這樣的，我有三個異步請求需要發送，互相沒有關聯，隻是需要當請求都結束後将界面的 loading 清除掉即可。

剛學完

async await

開心啊，到處亂用~

function sleep(second) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('request done! ' + Math.random());
        }, second);
    })
}

async function bugDemo() {
    console.time("時間一");
    await sleep();
    await sleep();
    await sleep();
    console.log('clear the loading~');
    console.timeEnd("時間一");
    //輸出：時間一: 3009.62109375ms
}

bugDemo();
           

loading 确實是等待請求都結束完才清除的。但是你認真的觀察下浏覽器的 timeline 請求是一個結束後再發另一個的（若觀察效果請發真實的 ajax 請求）

那麼，正常的處理是怎樣的呢？

async function correctDemo() {
    console.time("時間二");
    let p1 = sleep();
    let p2 = sleep();
    let p3 = sleep();
    await Promise.all([p1, p2, p3]);
    console.log('clear the loading~');
    console.timeEnd("時間二");
    //輸出：時間二: 1014.670166015625ms
}
correctDemo();// clear the loading~
           

恩， 完美。看吧~ async-await并不能取代promise.

await in for 循環

最後一點了，await必須在async函數的上下文中的

// 正常 for 循環
async function forDemo() {
    let arr = [, , , , ];
    for (let i = ; i < arr.length; i ++) {
        await arr[i];
        //let a = await arr[i];
        //console.log(a);
    }
}
forDemo();//正常輸出
// 因為想要炫技把 for循環寫成下面這樣
async function forBugDemo() {
    let arr = [, , , , ];
    arr.forEach(item => {
        await item;
    });
}
forBugDemo();// Uncaught SyntaxError: Unexpected identifier