[譯]理解Javascript的非同步等待

原文鏈接： "https://ponyfoo.com/articles/understanding javascript async await" 作者： "Nicolás Bevacqua" 目前特性並沒有被添加到ES2016標準中，但不代表這些特性將來不會被加入到Javascript中。在我寫 ...

原文鏈接： https://ponyfoo.com/articles/understanding-javascript-async-await
作者： Nicolás Bevacqua

目前async / await特性並沒有被添加到ES2016標準中，但不代表這些特性將來不會被加入到Javascript中。在我寫這篇文章時，它已經到達第三版草案，並且正迅速的發展中。這些特性已經被IE Edge支持了，而且它將會到達第四版，屆時該特性將會登陸其他瀏覽器 -- 為加入該語言的下一版本而鋪路（也可以看看：TC39進程）。

我們聽說特性已經有一段時間了，現在讓我們深入它，並瞭解它是如何工作的。為了能夠瞭解這篇文章的內容，你需要對promise和生成器對象有深厚的理解。這些資源或許可以幫到你。

使用Promise

讓我們假設我們有像下麵這樣的代碼。在這裡我將一個HTTP請求包裝在一個Promise對象中。這個Promise在成功時會返回body對象，被拒絕時會將原因err返回。它每次都會在本博客（原作者博客）中為一篇隨機文章拉取html內容。

var request = require('request');

function getRandomPonyFooArticle () {
  return new Promise((resolve, reject) => {
    request('https://ponyfoo.com/articles/random', (err, res, body) => {
      if (err) {
        reject(err); return;
      }
      resolve(body);
    });
  });
}

上述的promise代碼的典型用法是像下麵寫的這樣。在那裡，我們新建了一個promise鏈來將HTML頁面中的DOM對象的一個子集轉換成Markdown，然後再轉換成對終端友好的輸出，最終再使用console.log輸出它。永遠要記得為你的promise添加.catch處理器。

var hget = require('hget');
var marked = require('marked');
var Term = require('marked-terminal');

printRandomArticle();

function printRandomArticle () {
  getRandomPonyFooArticle()
    .then(html => hget(html, {
      markdown: true,
      root: 'main',
      ignore: '.at-subscribe,.mm-comments,.de-sidebar'
    }))
    .then(md => marked(md, {
      renderer: new Term()
    }))
    .then(txt => console.log(txt))
    .catch(reason => console.error(reason));
}

當代碼運行後，這段代碼將產生像以下截圖所示的輸出。

上面那段代碼就是“比用回調函數更好”的寫法，它能讓你感覺像在按順序的閱讀代碼。

使用生成器（generator）

過去，通過探索，我們發現生成器可以用一種“同步”合成的方法來獲得html。即使現在的代碼有一些同步寫法，其中還是涉及相當多的包裝，而且生成器可能不是最直截了當的達到我們期望結果的方法，最終可能無論如何我們都會堅持改為使用promise。

function getRandomPonyFooArticle (gen) {
  var g = gen();
  request('https://ponyfoo.com/articles/random', (err, res, body) => {
    if (err) {
      g.throw(err); return;
    }
    g.next(body);
  });
}

getRandomPonyFooArticle(function* printRandomArticle () {
  var html = yield;
  var md = hget(html, {
    markdown: true,
    root: 'main',
    ignore: '.at-subscribe,.mm-comments,.de-sidebar'
  });
  var txt = marked(md, {
    renderer: new Term()
  });
  console.log(txt);
});

“請記住，在使用promise時，你應該將yield調用包裝在try/catch塊中來保留我們添加的錯誤處理器”

不說你也知道，像這樣使用生成器並不容易擴展。除了涉及直觀的語法的混入，你的迭代代碼會高度耦合到生成器函數中，這將會降低擴展性。這表示你在添加新的await表達式到生成器中時需要經常修改它。一個更好的替代方案是使用即將到來的Async函數。

使用async/await

當Async函數終於落地時，我們將可以採取基於Promise的實現方法並使用它的優點，即像寫同步生成器一樣寫非同步。這種做法的另一個好處是你完全不需要再去修改getRandomPonyFooArticle方法，在它返回一個承諾前，它會一直等待。

要註意的是，await只能在函數中用async關鍵字標記後才能使用 它的工作方式和生成器很相似，直到promise完成之前，會在你的上下文中暫停處理。如果等待表達式不是一個promise，它也會被改造成一個promise。

read();

async function read () {
  var html = await getRandomPonyFooArticle();
  var md = hget(html, {
    markdown: true,
    root: 'main',
    ignore: '.at-subscribe,.mm-comments,.de-sidebar'
  });
  var txt = marked(md, {
    renderer: new Term()
  });
  console.log(txt);
}

“再次， -- 跟生成器一樣 -- 記住，你最好把`await`包裝到`try/catch`中，這樣你就可以在非同步函數中對返回後的promise進行錯誤捕獲和處理。”

此外，一個Async函數總是會返回一個Promise對象。這個promise在出現無法捕獲的異常時會被拒絕，否則它會處理async函數的返回值。這就允許我們調用一個async函數並混入常規的基於promise的擴展。以下例子展示了兩個方法的結合（看看Babel的互動式解釋器）。

async function asyncFun () {
  var value = await Promise
    .resolve(1)
    .then(x => x * 3)
    .then(x => x + 5)
    .then(x => x / 2);
  return value;
}
asyncFun().then(x => console.log(`x: ${x}`));
// <- 'x: 4'

回到前一個例子中，那表示我們可以從非同步讀取函數中返迴文本，並且允許調用者使用promise或另一個Async函數進行擴展。那樣，你的讀取函數將只需關註從Pony Foo上的隨機文章中拉取終端可讀的Markdown即可。

async function read () {
  var html = await getRandomPonyFooArticle();
  var md = hget(html, {
    markdown: true,
    root: 'main',
    ignore: '.at-subscribe,.mm-comments,.de-sidebar'
  });
  var txt = marked(md, {
    renderer: new Term()
  });
  return txt;
}

然後，你可以進一步在另一個Async函數中調用await read()。

async function write () {
  var txt = await read();
  console.log(txt);
}

或者你可以只使用promise對象來進一步擴展。

read().then(txt => console.log(txt));

岔路

在非同步代碼流中，總是能遇到同時執行兩個或更多任務的情況。當Async函數更容易編寫非同步代碼後，它們也將自己依次傳遞給代碼。這就是說：代碼在一個時刻只執行一個操作。一個包含多個await表達式的函數在promise對象執行完之前，在恢復執行和移動到下一個await表達式之前，會在每個await表達式處暫停一次， -- 就跟我們在生成器和yield關鍵字處觀察到的情況一樣。

你可以使用Promise.all來解決創建單個promise對象併進行等待的功能。當然，最大的問題是從習慣於讓所有東西都串列運行改成使用Promise.all, 否則這將給你的代碼帶來性能瓶頸。

下麵的例子展示了你如何同時完成對三個不同的promise對象進行等待操作。特定的await操作符會暫停你的Async函數，和等待 Promise.all表達式一起，最終會被解析到一個結果數組中，我們可以使用析構函數逐個拉取該數組中的單個結果。

async function concurrent () {
  var [r1, r2, r3] = await Promise.all([p1, p2, p3]);
}

在某些情況下，可以用 await *來改動上述代碼片段，讓你不必用Promise.all來包裝你的promise對象。Babel 5依然支持這種特性，但它已經從規格說明中移除（也已經從Babel 6中移除） -- 因為這些原因

async function concurrent () {
  var [r1, r2, r3] = await* [p1, p2, p3];
}

你依然可以用類似all = Promise.all.bind(Promise)的代碼來做些事情，來獲得一個簡潔的替代Promise.all的方法。在這之上的是，你可以對Promise.race做相同的事情，而這跟使用await*並不等價。

const all = Promise.all.bind(Promise);
async function concurrent () {
  var [r1, r2, r3] = `await all([p1, p2, p3])`;
}

錯誤處理

要註意的是，在非同步函數中，錯誤會被“默默的”吞噬 -- 就像在普通的Promise對象中一樣。除非我們圍繞await表達式添加try/catch塊 -- 而不管在暫停時，它們會在你的非同步函數體中發生還是在它暫停時發生 -- promise對象會被拒絕並通過Async函數返回錯誤。

自然，這可以看作是一個能力：你可以利用try/catch代碼塊，有些東西你無法用回調函數實現-- 但可以用Promise對象實現。在這種情況下，Async函數就類似生成器，得益於函數執行暫停特性，你可以利用try/catch將非同步流代碼寫成同步代碼的樣子。

此外，你可以在Async函數外捕獲這些異常，只需要簡單的對它們返回的promise對象添加.catch()方法調用。在promise對象中嘗試用.catch方法來將try/catch錯誤處理組合起來是一種比較靈活的方法，但該方法也可能導致混亂並最終導致錯誤無法處理。

read()
  .then(txt => console.log(txt))
  .catch(reason => console.error(reason));

我們要小心謹慎並時刻提醒自己用不同的方法來讓我們可以發現錯誤、處理錯誤或預防錯誤。

如今如何使用`async/await`

如今，有一種在你的代碼中使用Async函數的方法是通過Babel。這涉及一系列模塊，但只要你願意，你總是可以拿出一個模塊來將全部這些代碼包裝進去。我包含npm-run作為一個有用的方法，用於保持本地的所有東西都用包進行安裝。

npm i -g npm-run
npm i -D \
  browserify \
  babelify \
  babel-preset-es2015 \
  babel-preset-stage-3 \
  babel-runtime \
  babel-plugin-transform-runtime

echo '{
  "presets": ["es2015", "stage-3"],
  "plugins": ["transform-runtime"]
}' > .babelrc

在使用babelify為Async函數提供支持時，以下命令會將example.js通過browserify進行編譯。然後你就可以用管道將腳本傳輸給node執行，或將腳本保存到硬碟中。

npm-run browserify -t babelify example.js | node

深入閱讀

Async函數規格草案出奇的短，並且應該能成為一個有趣的讀物，如果你熱衷於學習更多這些即將到來的功能。

我已經粘貼了一段代碼在下麵，它是為了幫助你理解async函數的內部是如何工作的。即使我們不可以填充新的關鍵字，它也可以幫助你理解在async/await的帷幕後面發生了什麼事情。

“換句話說，它應該對學習非同步函數內部原理非常有幫助，無論是對生成器還是promise。”

首先，下麵的一小段代碼展示了一個async函數如何通過常規的function關鍵字來簡化聲明過程，這將返回一個生成spawn 生成器函數的結果 -- 我們會認為await在語法上是和yield等價的。

async function example (a, b, c) {
  example function body
}

function example (a, b, c) {
  return spawn(function* () {
    example function body
  }, this);
}

在spawn中，promise會被代碼包裝起來並傳入生成器函數中，通過用戶代碼串列的執行，並將值傳遞到你的“生成器”代碼中（async函數的函數體中）。在這個意義上，我們可以註意Async函數真的是生成器和primose對象之上的語法糖，這對於讓你理解其中每一個環節是如何工作來說非常重要，這是為了讓你對於混合、匹配、合併不同的非同步代碼流的寫法有一個更好的理解。

function spawn (genF, self) {
  return new Promise(function (resolve, reject) {
    var gen = genF.call(self);
    step(() => gen.next(undefined));
    function step (nextF) {
      var next;
      try {
        next = nextF();
      } catch(e) {
        // 執行失敗，並拒絕promise對象
        reject(e);
        return;
      }
      if (next.done) {
        // 執行成功，處理promise對象
        resolve(next.value);
        return;
      }
      // 未完成，以yield標記的promise對象唄中斷，併在此執行step方法
      Promise.resolve(next.value).then(
        v => step(() => gen.next(v)),
        e => step(() => gen.throw(e))
      );
    }
  });
}

“高亮部分的代碼可以幫助你理解`async/await`如何對生成器序列進行迭代處理（通過`await`表達式），將每個對象按包裝序列中並放入一個promise對象，通過一步步按順序的鏈接起來。當**序列完成或其中一個promise對象被拒絕**時，promise對象的返回動作將由底層生成器函數完成”

特別鳴謝 @ljharb, @jaydson, @calvinf, @ericclemmons, @sherman3ero, @matthewmolnar3以及@rauschma為這篇文章的草稿進行審閱。

第一次用博客園的markdown編輯器寫博客，還不太順手，對markdown也不夠熟悉（其實我也感覺博客園的markdown解析怪怪的）。這篇文章的英語感覺比較難看懂，翻譯不准確甚至錯誤的地方應該很多，希望大家不吝指正。

2016.09.05
謝謝觀看。