摘要：有兩個(gè)陌生的關(guān)鍵字，同時(shí)函數(shù)執(zhí)行結(jié)果似乎返回了一個(gè)對(duì)象。用來表示函數(shù)是異步的，定義的函數(shù)會(huì)返回一個(gè)對(duì)象，可以使用方法添加回調(diào)函數(shù)。如果的是對(duì)象會(huì)造成異步函數(shù)停止執(zhí)行并且等待的解決如果等的是正常的表達(dá)式則立即執(zhí)行。

視頻講解

關(guān)于異步處理，ES5的回調(diào)使我們陷入地獄，ES6的Promise使我們脫離魔障，終于、ES7的async-await帶我們走向光明。今天就來學(xué)習(xí)一下 async-await。

經(jīng)常會(huì)看到有了 async-await、promise 還有必要學(xué)習(xí)嗎、async await優(yōu)于promise的幾個(gè)特點(diǎn)，接收了這些信息后，就蒙圈了。現(xiàn)在才知道，async-await是promise和generator的語法糖。只是為了讓我們書寫代碼時(shí)更加流暢，當(dāng)然也增強(qiáng)了代碼的可讀性。簡(jiǎn)單來說：async-await 是建立在 promise機(jī)制之上的，并不能取代其地位。

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

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

上述代碼就是async-await的基本使用形式。有兩個(gè)陌生的關(guān)鍵字async、await，同時(shí)函數(shù)執(zhí)行結(jié)果似乎返回了一個(gè)promise對(duì)象。

async用來表示函數(shù)是異步的，定義的函數(shù)會(huì)返回一個(gè)promise對(duì)象，可以使用then方法添加回調(diào)函數(shù)。

async function demo01() {
    return 123;
}

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

await 可以理解為是 async wait 的簡(jiǎn)寫。await 必須出現(xiàn)在 async 函數(shù)內(nèi)部，不能多帶帶使用。

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

await 后面可以跟任何的JS 表達(dá)式。雖然說 await 可以等很多類型的東西，但是它最主要的意圖是用來等待 Promise 對(duì)象的狀態(tài)被 resolved。如果await的是 promise對(duì)象會(huì)造成異步函數(shù)停止執(zhí)行并且等待 promise 的解決,如果等的是正常的表達(dá)式則立即執(zhí)行。

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(2000);
    console.log(result);// 兩秒之后會(huì)被打印出來
}
awaitDemo();
// normalFunc
// VM4036:13 something, ~~
// VM4036:15  enough sleep~

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

舉例說明啊，你有三個(gè)請(qǐng)求需要發(fā)生，第三個(gè)請(qǐng)求是依賴于第二個(gè)請(qǐng)求的解構(gòu)第二個(gè)請(qǐng)求依賴于第一個(gè)請(qǐng)求的結(jié)果。若用 ES5實(shí)現(xiàn)會(huì)有3層的回調(diào)，若用Promise 實(shí)現(xiàn)至少需要3個(gè)then。一個(gè)是代碼橫向發(fā)展，另一個(gè)是縱向發(fā)展。今天指給出 async-await 的實(shí)現(xiàn)哈~

//我們?nèi)匀皇褂?setTimeout 來模擬異步請(qǐng)求
function sleep(second, param) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(param);
        }, second);
    })
}

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

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

上述的代碼好像給的都是resolve的情況，那么reject的時(shí)候我們?cè)撊绾翁幚砟兀?/p>

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

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

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

errorDemoSuper();// want to sleep~
// 有了 try catch 之后我們就能夠拿到 Promise.reject 回來的數(shù)據(jù)了。

我這里為啥加了三個(gè)感嘆號(hào)呢~，因?yàn)閷?duì)于初學(xué)者來說一不小心就將 ajax 的并發(fā)請(qǐng)求發(fā)成了阻塞式同步的操作了，我就真真切切的在工作中寫了這樣的代碼。await 若等待的是 promise 就會(huì)停止下來。業(yè)務(wù)是這樣的，我有三個(gè)異步請(qǐng)求需要發(fā)送，相互沒有關(guān)聯(lián)，只是需要當(dāng)請(qǐng)求都結(jié)束后將界面的 loading 清除掉即可。
剛學(xué)完 async await 開心啊，到處亂用~

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

async function bugDemo() {
    await sleep(1000);
    await sleep(1000);
    await sleep(1000);
    console.log("clear the loading~");
}

bugDemo();

loading 確實(shí)是等待請(qǐng)求都結(jié)束完才清除的。但是你認(rèn)真的觀察下瀏覽器的 timeline 請(qǐng)求是一個(gè)結(jié)束后再發(fā)另一個(gè)的（若觀察效果請(qǐng)發(fā)真實(shí)的 ajax 請(qǐng)求）
那么，正常的處理是怎樣的呢？

async function correctDemo() {
    let p1 = sleep(1000);
    let p2 = sleep(1000);
    let p3 = sleep(1000);
    await Promise.all([p1, p2, p3]);
    console.log("clear the loading~");
}
correctDemo();// clear the loading~

恩， 完美?？窗蓗 async-await并不能取代promise.

最后一點(diǎn)了，await必須在async函數(shù)的上下文中的。

// 正常 for 循環(huán)
async function forDemo() {
    let arr = [1, 2, 3, 4, 5];
    for (let i = 0; i < arr.length; i ++) {
        await arr[i];
    }
}
forDemo();//正常輸出
// 因?yàn)橄胍偶及?for循環(huán)寫成下面這樣
async function forBugDemo() {
    let arr = [1, 2, 3, 4, 5];
    arr.forEach(item => {
        await item;
    });
}
forBugDemo();// Uncaught SyntaxError: Unexpected identifier

不知道，我的意思有沒有傳遞給大家。下面推薦幾篇優(yōu)秀的文章。
async 函數(shù)的含義和用法
ES7 Async Await 聖經(jīng)
Understanding JavaScript’s async await

【開發(fā)環(huán)境推薦】Cloud Studio 是基于瀏覽器的集成式開發(fā)環(huán)境，支持絕大部分編程語言，包括 HTML5、PHP、Python、Java、Ruby、C/C++、.NET 小程序等等，無需下載安裝程序，一鍵切換開發(fā)環(huán)境。 Cloud Studio提供了完整的 Linux 環(huán)境，并且支持自定義域名指向，動(dòng)態(tài)計(jì)算資源調(diào)整，可以完成各種應(yīng)用的開發(fā)編譯與部署。