摘要：簡(jiǎn)介指的是兩個(gè)關(guān)鍵字，是引入的新標(biāo)準(zhǔn)，關(guān)鍵字用于聲明函數(shù)，關(guān)鍵字用來(lái)等待異步必須是操作，說(shuō)白了就是的語(yǔ)法糖。最后希望大家在讀過(guò)異步發(fā)展流程這個(gè)系列之后，對(duì)異步已經(jīng)有了較深的認(rèn)識(shí)，并可以在不同情況下游刃有余的使用這些處理異步的編程手段。

這篇文章是異步發(fā)展流程系列的最后一篇，可能會(huì)涉及 Promise、Generators、co 等前置知識(shí)，如果對(duì)這些不是很了解可以看這個(gè)系列的前三篇：

異步發(fā)展流程 —— Promise 的基本使用

異步發(fā)展流程 —— 手寫(xiě)一個(gè)符合 Promise/A+ 規(guī)范的 Promise

異步發(fā)展流程 —— Generators + co 讓異步更優(yōu)雅

如果已經(jīng)具備這些前置知識(shí)，那我們繼續(xù)看看今天的主角，JavaScript 異步編程的終極大招 async/await。

async/await 指的是兩個(gè)關(guān)鍵字，是 ES7 引入的新標(biāo)準(zhǔn)，async 關(guān)鍵字用于聲明 async 函數(shù)，await 關(guān)鍵字用來(lái)等待異步（必須是 Promise）操作，說(shuō)白了 async/await 就是 Generators + co 的語(yǔ)法糖。

async/await 和 Generators + co 的寫(xiě)法非常的相似，只是把用于聲明 Generator 函數(shù)的 * 關(guān)鍵字替換成了 async 并寫(xiě)在了 function 關(guān)鍵字的前面，把 yield 關(guān)鍵字替換成了 await；另外，async 函數(shù)是基于 Promise 的，await 關(guān)鍵字后面等待的異步操作必須是一個(gè) Promise 實(shí)例，當(dāng)然也可以是原始類型的值，只不過(guò)這時(shí)的執(zhí)行效果等同于同步，與 Generator 不同的是，await 關(guān)鍵字前可以使用變量去接收這個(gè)正在等待的 Promise 實(shí)例執(zhí)行后的結(jié)果。

async 函數(shù)返回一個(gè) Promise 實(shí)例，可以使用 then 方法添加回調(diào)函數(shù)。當(dāng)函數(shù)執(zhí)行的時(shí)候，只要遇到 await 就會(huì)等待，直到 await 后面的同步或異步操作完成，再接著執(zhí)行函數(shù)體內(nèi)后面的語(yǔ)句。

async 的聲明方式大概有以下幾種：

//  async 函數(shù)聲明
// 函數(shù)聲明
async function fn() {}

// 函數(shù)表達(dá)式
const fn = async function() {};

// 箭頭函數(shù)
const fn = async () => {};

// 作為對(duì)象的方法
let obj = {
    async fn() {}
};

// 作為 class 的方法
class Person(name) {
    constructor () {
        this.name = name;
    }
    async getName() {
        const name = await this.name;
        return name;
    }
}

在上一篇介紹 Generators + co 的文章中我們舉了一個(gè)例子，使用 NodeJS 的 fs 模塊連續(xù)異步讀文件，第一個(gè)文件名為 a.txt，讀到的內(nèi)容為 b.txt，作為要讀的第二個(gè)文件的文件名，繼續(xù)讀 b.txt 后將讀到的內(nèi)容 “Hello world” 打印出來(lái)。

我們來(lái)使用 async/await 的方式來(lái)實(shí)現(xiàn)一下：

// async 函數(shù)實(shí)現(xiàn)文件讀取
// 引入依賴
const fs = require("fs");
const util = require("util");

// 將 fs.readFile 轉(zhuǎn)換成 Promise
const readFile = util.promisify(fs.readFile);

// 聲明 async 函數(shù)
async function read(file) {
    let aData = await readFile(file, "utf8");
    let bData = await readFile(aData, "utf8");
    return bData;
}

// 調(diào)用 async 函數(shù)
read("a.txt").then(data => {
    console.log(data); // Hello world
});

其實(shí)對(duì)比上一篇文章 Generator 的案例，與 Generator 函數(shù)一樣，寫(xiě)法像同步，執(zhí)行是異步，不同的是我們即沒(méi)有手動(dòng)調(diào)用 next 方法，也沒(méi)有借助 co 庫(kù)，其實(shí)是 async 函數(shù)內(nèi)部集成了類似于 co 的執(zhí)行器，幫我們?cè)诋惒酵瓿珊笞詣?dòng)向下執(zhí)行代碼，所以說(shuō) async/await 是 Generators + co 的語(yǔ)法糖。

async 函數(shù)內(nèi)部如果執(zhí)行錯(cuò)誤可以有三種方式進(jìn)行錯(cuò)誤處理：

在 await 后面的 Promise 實(shí)例使用 then 方法錯(cuò)誤的回調(diào)或 catch 方法進(jìn)行錯(cuò)誤處理；

如果有多個(gè) await，可以在 async 函數(shù)執(zhí)行完后使用 catch 方法統(tǒng)一處理；

由于 async 內(nèi)部代碼是同步的寫(xiě)法，多個(gè) await 的情況也可以使用 try...catch... 進(jìn)行處理。

需要注意的是，如果在 async 函數(shù)內(nèi)部使用了 try...catch... 又在函數(shù)執(zhí)行完后使用了 catch，錯(cuò)誤會(huì)優(yōu)先被同步的 try...catch... 捕獲到，后面的 catch 就不會(huì)再捕獲了。

// async 函數(shù)異常捕獲
// 第一種
async function fn() {
    let result = await Promise.reject("error").catch(err => {
        console.log(err);
    });
}

fn(); // error

// 第二種
async function fn() {
    try {
        let val1 = await Promise.reject("error");
        let val2 = await Promise.resolve("success");
    } catch (e) {
        console.log(e);
    }
}

fn(); // error

// 第三種
async function fn() {
    let val1 = await Promise.resolve("success");
    let val2 = await Promise.reject("error");
}

fn().catch((err => console.log(err))); // error

在 async 函數(shù)中，如果有多個(gè) await 互不依賴，這種情況下如果執(zhí)行一個(gè)，等待一個(gè)完成，再執(zhí)行一個(gè)，再等待完成，這樣是很浪費(fèi)性能的，所以我們要把這些異步操作同時(shí)觸發(fā)。

假設(shè)我們異步讀取兩個(gè)文件，且這兩個(gè)文件不相關(guān)，我可以使用下面的方式來(lái)實(shí)現(xiàn)：

// await 異步并發(fā)
// 前置
const fs = require("fs");
const util = require("util");
const readFile = util.promisify(fs.readFile);

// 需要改進(jìn)的 async 函數(shù)
async function fn() {
    let aData = await readFile("a.txt", "utf8");
    let bData = await readFile("b.txt", "utf8");
    return [aData, bData];
}

fn();

// 在 async 函數(shù)外部觸發(fā)異步
let aDataPromise = readFile("a.txt", "utf8");
let bDataPromise = readFile("b.txt", "utf8");

async function fn() {
    let aData = await aDataPromise;
    let bData = await bDataPromise;
    return [aData, bData];
}

fn();

// 使用 Promise.all
async function fn() {
    let dataArr = await Promise.all(
        readFile("a.txt", "utf8"),
        readFile("a.txt", "utf8")
    );
    return dataArr;
}

fn();

使用 async/await 應(yīng)注意以下幾點(diǎn)：

對(duì) await 習(xí)慣性錯(cuò)誤處理；

await 命令后互不依賴的異步應(yīng)同時(shí)觸發(fā)；

async 函數(shù)中，函數(shù)的執(zhí)行上/下文發(fā)生變化時(shí)，不能使用 await（如使用 forEach 循環(huán)的回調(diào)中）。

針對(duì)第一點(diǎn)，在 async 函數(shù)中 await 命令后面大多情況下是 Promise 異步操作，運(yùn)行結(jié)果可能出現(xiàn)錯(cuò)誤并調(diào)用 reject 函數(shù)，最好對(duì)這個(gè) await 語(yǔ)句進(jìn)行錯(cuò)誤處理，具體方式參照 async 函數(shù)基本用法中關(guān)于錯(cuò)誤處理的內(nèi)容。

針對(duì)第二點(diǎn)，如果兩個(gè)或多個(gè) await 命令后的異步操作沒(méi)有依賴關(guān)系，執(zhí)行時(shí)，需先觸發(fā)第一個(gè)，等待異步完成，再觸發(fā)第二個(gè)，再等異步完成，依次類推，這樣比較耗時(shí)，性能不好，所以應(yīng)該將這些異步操作同時(shí)觸發(fā)，觸發(fā)方式參照 async 函數(shù)基本用法中的 await 異步并發(fā)的內(nèi)容。

針對(duì)第三點(diǎn)，如果聲明一個(gè) async 函數(shù)并傳入一個(gè)數(shù)組，數(shù)組里面存儲(chǔ)的都是 Promise 實(shí)例，若使用 forEach 循環(huán)數(shù)組，由于函數(shù)的執(zhí)行上/下文發(fā)生了變化，此時(shí)使用 await 命令會(huì)報(bào)錯(cuò)。

// 循環(huán)內(nèi)使用 await
// 創(chuàng)建 Promise 實(shí)例
let p1 = Promise.resolve("p1 success");
let p2 = Promise.resolve("p2 success");
let p3 = Promise.resolve("p3 success");


// async 函數(shù)
async function fn(promises) {
    promise.forEach(function (promise) {
        await promise;
    });
}

fn([p1, p2, p3]); // 執(zhí)行時(shí)報(bào)錯(cuò)


// 修改方式
async function fn(promises) {
    for(let i = 0; i < promises.length; i++) {
        await pormises[i];
    }
}

fn([p1, p2, p3]); // 正常執(zhí)行

async/await 的實(shí)現(xiàn)原理，其實(shí)就是在 async 函數(shù)內(nèi)部邏輯映射成了 Generator 函數(shù)并集成了一個(gè)類似于 co 的執(zhí)行器，所以我們使用 async/await 的時(shí)候，代碼更簡(jiǎn)潔，沒(méi)有了自己觸發(fā)遍歷器的 next 或調(diào)用 co 充當(dāng)執(zhí)行器的過(guò)程，只需要關(guān)心 async 函數(shù)的內(nèi)部邏輯就可以了，因?yàn)閷?xiě)法與同步相同，更提高了代碼的可讀性，所以說(shuō) async/await 是異步編程的終極大招。

由于 async/await 是 ES7 規(guī)范，在瀏覽器端的支持并不是那么的友好，所以現(xiàn)在這種寫(xiě)法多用在 NodeJS 的異步操作當(dāng)中，在 NodeJS 框架 Koa 2.x 版本得到廣泛應(yīng)用。

最后希望大家在讀過(guò)異步發(fā)展流程這個(gè)系列之后，對(duì) JavaScript 異步已經(jīng)有了較深的認(rèn)識(shí)，并可以在不同情況下游刃有余的使用這些處理異步的編程手段。