細說 async/await 相較於 Promise 的優點

前言

上一篇文章 「前端面試題系列1」今日頭條 面試題和思路解析 中提到了 async/await。它是在 ES8 中正式提出的，可是我發現，身邊的朋友用到 async/await 的並很少。那麼今天，咱們就具體地聊聊什麼是 async 函數，與 Promise 相比較，有哪些寫法與運用上的優點。

熟悉的同窗，也能夠溫故而知新，正文開始。。。

async 函數是什麼？

談及異步回調函數的嵌套，總會讓人感到煩躁，特別是當業務邏輯複雜，每每須要調用幾回 ajax 才能拿到全部須要的數據。

從最先的回調函數，到 Promise 對象，再到 Generator 函數，每次都有所改進，但又讓人以爲不完全。它們都有額外的複雜性，都須要理解抽象的底層運行機制。因此，咱們須要一種方法，更優雅地解決異步操做。因而，async函數出現了。

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

它有如下幾個特色：

• 創建在 promise 之上。因此，不能把它和回調函數搭配使用。但它會聲明一個異步函數，並隱式地返回一個Promise。所以能夠直接return變量，無需使用 Promise.resolve 進行轉換。
• 和 promise 同樣，是非阻塞的。但不用寫 then 及其回調函數，這減小代碼行數，也避免了代碼嵌套。並且，全部異步調用，能夠寫在同一個代碼塊中，無需定義多餘的中間變量。
• 它的最大價值在於，可使異步代碼，在形式上，更接近於同步代碼。
• 它老是與 await 一塊兒使用的。而且，await 只能在 async 函數體內。
• await 是個運算符，用於組成表達式，它會阻塞後面的代碼。若是等到的是 Promise 對象，則獲得其 resolve 值。不然，會獲得一個表達式的運算結果。

爲什麼說 async 函數是語法糖

async 函數的實現，其實就是將 Generator 函數和自動執行器，包裝在一個函數裏。下面的這個例子，來自阮老師的 《async 函數的含義和用法》 一文。

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

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

// spawn 函數就是自動執行器
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 函數是 Generator 函數的語法糖。另外，它相對較新，屬於 ES8 中的語法。可是轉碼器 Babel 已經支持，轉碼後就能使用。

async 相較於 Promise 的優點

1.相比於 Promise，它能更好地處理 then 鏈

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);
}
複製代碼

如今用 Promise 方式來實現這三個步驟的處理。

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 來實現的話，會是這樣：

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();
複製代碼

結果和以前的 Promise 實現是同樣的，可是這個代碼看起來是否是清晰得多，幾乎跟同步代碼同樣。

2.中間值

如今把業務要求改一下，仍然是三個步驟，但每個步驟都須要以前每一個步驟的結果。Pomise的實現看着很暈，傳遞參數太過麻煩。

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();
複製代碼

沒有多餘的中間值，更加優雅地實現了。

3.調試

相比於 Promise 更易於調試。

由於沒有代碼塊，因此不能在一個返回的箭頭函數中設置斷點。若是你在一個 .then 代碼塊中使用調試器的步進(step-over)功能，調試器並不會進入後續的 .then 代碼塊，由於調試器只能跟蹤同步代碼的每一步。

如今，若是使用 async/await，你就沒必要再使用箭頭函數。你能夠對 await 語句執行步進操做，就好像他們都是普通的同步語句同樣。

總結

每個特性的出現，總有它的用途，而只有用了，才能更好地理解它。

JavaScript的異步編寫方式，從 回調函數 到 Promise、Generator 再到 Async/Await。表面上只是寫法的變化，但本質上則是語言層的一次次抽象。讓咱們能夠用更簡單的方式實現一樣的功能，而不須要去考慮代碼是如何執行的。

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

參考文獻

• async 函數的含義和用法
• (譯) 6個Async/Await優於Promise的方面

PS：歡迎關注個人公衆號 「超哥前端小棧」，交流更多的想法與技術。