摘要：它細說了什么是函數(shù)，以及其相較于的優(yōu)勢。從最早的回調(diào)函數(shù)，到對象，再到函數(shù)，每次都有所改進，但又讓人覺得不徹底。所以，不能把它和回調(diào)函數(shù)搭配使用。但不用寫及其回調(diào)函數(shù)，這減少代碼行數(shù)，也避免了代碼嵌套。總結(jié)的異步編寫方式，從回調(diào)函數(shù)到再到。

介于上一篇 「今日頭條」前端面試題和思路解析 中提到的 async/await，讓我想起了之前寫過的一篇文章，在此做個分享。它細說了什么是async函數(shù)，以及其相較于 Promise 的優(yōu)勢。

溫故而知新，正文開始。

談及異步回調(diào)函數(shù)的嵌套，總會讓人感到煩躁，特別是當(dāng)業(yè)務(wù)邏輯復(fù)雜，往往需要調(diào)用幾次 ajax 才能拿到所有需要的數(shù)據(jù)。

從最早的回調(diào)函數(shù)，到 Promise 對象，再到 Generator 函數(shù)，每次都有所改進，但又讓人覺得不徹底。它們都有額外的復(fù)雜性，都需要理解抽象的底層運行機制。所以，我們需要一種方法，更優(yōu)雅地解決異步操作。于是，async函數(shù)出現(xiàn)了。

一句話解釋：async 函數(shù)，就是 Generator 函數(shù)的語法糖。

它有以下幾個特點：

建立在promise之上。所以，不能把它和回調(diào)函數(shù)搭配使用。但它會聲明一個異步函數(shù)，并隱式地返回一個Promise。因此可以直接return變量，無需使用Promise.resolve進行轉(zhuǎn)換。

和promise一樣，是非阻塞的。但不用寫 then 及其回調(diào)函數(shù)，這減少代碼行數(shù)，也避免了代碼嵌套。而且，所有異步調(diào)用，可以寫在同一個代碼塊中，無需定義多余的中間變量。

它的最大價值在于，可以使異步代碼，在形式上，更接近于同步代碼。

它總是與await一起使用的。并且，await 只能在 async 函數(shù)體內(nèi)。

await 是個運算符，用于組成表達式，它會阻塞后面的代碼。如果等到的是 Promise 對象，則得到其 resolve值。否則，會得到一個表達式的運算結(jié)果。

async 函數(shù)的實現(xiàn)，其實就是將 Generator 函數(shù)和自動執(zhí)行器，包裝在一個函數(shù)里。下面的這個例子，來自阮老師的 《async 函數(shù)的含義和用法》 一文。

async function fn(args) {
    // ...
}

// 等同于
function fn(args) {
    return spawn(function*() {
        // ...
    });
}

// spawn 函數(shù)就是自動執(zhí)行器
function spawn(genF) {
    return new Promise(function(resolve, reject) {
        var gen = genF();
        function step(nextF) {
            try {
                var next = nextF();
            } catch(e) {
                return reject(e); 
        }
        if(next.done) {
            return resolve(next.value);
        } 
        Promise.resolve(next.value).then(function(v) {
            step(function() { return gen.next(v); });      
        }, function(e) {
            step(function() { return gen.throw(e); });
        });
    }
    step(function() { return gen.next(undefined); });
  });
}

所以說，async 函數(shù)是 Generator 函數(shù)的語法糖。另外，它相對較新，屬于ES7中的語法。但是轉(zhuǎn)碼器 Babel 已經(jīng)支持，轉(zhuǎn)碼后就能使用。

function takeLongTime(n) {
    return new Promise(resolve => {
        setTimeout(() => resolve(n + 200), n);
    });
}

function step1(n) {
    console.log(`step1 with ${n}`);
    return takeLongTime(n);
}

function step2(n) {
    console.log(`step2 with ${n}`);
    return takeLongTime(n);
}

function step3(n) {
    console.log(`step3 with ${n}`);
    return takeLongTime(n);
}

現(xiàn)在用 Promise 方式來實現(xiàn)這三個步驟的處理。

function doIt() {
    console.time("doIt");
    const time1 = 300;
    step1(time1)
        .then(time2 => step2(time2))
        .then(time3 => step3(time3))
        .then(result => {
            console.log(`result is ${result}`);
        });
}
doIt();
// step1 with 300
// step2 with 500
// step3 with 700
// result is 900

如果用 async/await 來實現(xiàn)的話，會是這樣：

async function doIt() {
    console.time("doIt");
    const time1 = 300;
    const time2 = await step1(time1);
    const time3 = await step2(time2);
    const result = await step3(time3);
    console.log(`result is ${result}`);
}
doIt();

結(jié)果和之前的 Promise 實現(xiàn)是一樣的，但是這個代碼看起來是不是清晰得多，幾乎跟同步代碼一樣。

現(xiàn)在把業(yè)務(wù)要求改一下，仍然是三個步驟，但每一個步驟都需要之前每個步驟的結(jié)果。Pomise的實現(xiàn)看著很暈，傳遞參數(shù)太過麻煩。

function doIt() {
    console.time("doIt");
    const time1 = 300;
    step1(time1)
        .then(time2 => {
            return step2(time1, time2)
                .then(time3 => [time1, time2, time3]);
        })
        .then(times => {
            const [time1, time2, time3] = times;
            return step3(time1, time2, time3);
        })
        .then(result => {
            console.log(`result is ${result}`);
        });
}
doIt();

用 async/await 來寫：

async function doIt() {
    console.time("doIt");
    const time1 = 300;
    const time2 = await step1(time1);
    const time3 = await step2(time1, time2);
    const result = await step3(time1, time2, time3);
    console.log(`result is ${result}`);
}
doIt();

沒有多余的中間值，更加優(yōu)雅地實現(xiàn)了。

相比于 Promise 更易于調(diào)試。

因為沒有代碼塊，所以不能在一個返回的箭頭函數(shù)中設(shè)置斷點。如果你在一個 .then 代碼塊中使用調(diào)試器的步進(step-over)功能，調(diào)試器并不會進入后續(xù)的 .then 代碼塊，因為調(diào)試器只能跟蹤同步代碼的每一步。

現(xiàn)在，如果使用 async/await，你就不必再使用箭頭函數(shù)。你可以對 await 語句執(zhí)行步進操作，就好像他們都是普通的同步語句一樣。

JavaScript的異步編寫方式，從 回調(diào)函數(shù) 到 Promise、Generator 再到 Async/Await。表面上只是寫法的變化，但本質(zhì)上則是語言層的一次次抽象。讓我們可以用更簡單的方式實現(xiàn)同樣的功能，而不需要去考慮代碼是如何執(zhí)行的。

換句話說就是：異步編程的最高境界，就是根本不用關(guān)心它是不是異步。

async 函數(shù)的含義和用法

(譯) 6個Async/Await優(yōu)于Promise的方面

PS：歡迎關(guān)注我的公眾號 “超哥前端小?！保涣鞲嗟南敕ㄅc技術(shù)。