摘要：箭頭函數(shù)提示不會(huì)在乎你給的是否是函數(shù)，它只會(huì)把它當(dāng)做一個(gè)返回值是的普通函數(shù)。一旦所有瀏覽器都支持函數(shù)了，請(qǐng)?jiān)谒蟹祷刂凳堑暮瘮?shù)上使用因?yàn)樗粌H可以使你的代碼更，而且它確保了函數(shù)總是返回一個(gè)。

原文鏈接
另，斷斷續(xù)續(xù)翻譯了好幾天，在發(fā)表的時(shí)候去搜索了下有沒(méi)人翻譯了，因?yàn)檫@確實(shí)是篇好文章。還真有：文章鏈接，看了下，這篇翻譯的專業(yè)些，大家可以去看看。

Async 函數(shù)是一個(gè)非常了不起的東西，它將會(huì)在Chrome 55中得到默認(rèn)支持。它允許你書(shū)寫(xiě)基于promise的代碼，但它看起來(lái)就跟同步的代碼一樣，而且不會(huì)阻塞主線程。所以，它讓你的異步代碼看起來(lái)并沒(méi)有那么"聰明"卻更具有可讀性。

Async 函數(shù)的代碼示例：

async function myFirstAsyncFunction() {
  try {
    const fulfilledValue = await promise;
  }
  catch (rejectedValue) {
    // …
  }
}

如果你在一個(gè)函數(shù)聲明的的前面使用async關(guān)鍵字，那你就可以在這個(gè)函數(shù)內(nèi)使用await。當(dāng)你去await一個(gè)promise的時(shí)候，這個(gè)函數(shù)將會(huì)以非阻塞的方式暫停，直到promise處于settled狀態(tài)。如果這個(gè)Promise返回的是成功的狀態(tài)，你將會(huì)得到返回值，如果返回的是失敗的狀態(tài)，那失敗的信息將會(huì)被拋出。

 提示: 如果你對(duì)promises不熟悉，請(qǐng)查看我們的promises指南

假設(shè)我們想要請(qǐng)求一個(gè)URL然后把響應(yīng)信息打印出來(lái)，下面是使用promise的示例代碼：

function logFetch(url) {
  return fetch(url)
    .then(response => response.text())
    .then(text => {
      console.log(text);
    }).catch(err => {
      console.error("fetch failed", err);
    });
}

下面用async 函數(shù)來(lái)實(shí)現(xiàn)同樣的功能：

async function logFetch(url) {
  try {
    const response = await fetch(url);
    console.log(await response.text());
  }
  catch (err) {
    console.log("fetch failed", err);
  }
}

可以看到代碼行數(shù)和上例一樣，但是使用async函數(shù)的方式使得所有的回調(diào)函數(shù)都不見(jiàn)了！這讓我們的代碼非常容易閱讀，特別是那些對(duì)promise不是特別熟悉的同學(xué)。

 提示: 你await的任何值都是通過(guò)Promise.resolve()來(lái)傳遞的，所以你可以安全地使用非本地的promise.

不管你是否在函數(shù)內(nèi)部使用了await, Async 函數(shù)總是返回一個(gè)promise 。當(dāng) async函數(shù)顯示滴返回任意值時(shí),返回的promise將會(huì)調(diào)用resolve方法, 當(dāng)async函數(shù)拋出異常錯(cuò)誤時(shí)，返回的promise將會(huì)調(diào)用reject方法，所以：

// wait ms milliseconds
function wait(ms) {
  return new Promise(r => setTimeout(r, ms));
}

async function hello() {
  await wait(500);
  return "world";
}

當(dāng)執(zhí)行hello()時(shí)，返回一個(gè)成功狀態(tài)，并且傳遞的值為world的promise.

async function foo() {
  await wait(500);
  throw Error("bar");
}

當(dāng)執(zhí)行foo()時(shí)，返回一個(gè)失敗狀態(tài)，并且傳遞的值為Error("bar")的promise.

在更復(fù)雜點(diǎn)的案例中, async函數(shù)更能體現(xiàn)其優(yōu)越性。假設(shè)我們想要在記錄chunks數(shù)據(jù)時(shí)將其變成響應(yīng)流， 并返回最終的信息長(zhǎng)度。

 提示: "記錄chunks" 讓我感覺(jué)很別扭.

下面是使用promise的方式：

function getResponseSize(url) {
  return fetch(url).then(response => {
    const reader = response.body.getReader();
    let total = 0;

    return reader.read().then(function processResult(result) {
      if (result.done) return total;

      const value = result.value;
      total += value.length;
      console.log("Received chunk", value);

      return reader.read().then(processResult);
    })
  });
}

看清楚了，我是 promise “地下黨” Jake Archibald?？吹轿沂窃鯓釉谒鼉?nèi)部調(diào)用 processResult 并建立異步循環(huán)的了嗎？這樣寫(xiě)讓我覺(jué)得自己“很聰明”。但是正如大多數(shù)“聰明的”代碼一樣，你不得不盯著它看很久才能搞清楚它在做什么，就像九十年代的那些魔眼照片一樣。引用

讓我們用async函數(shù)來(lái)重寫(xiě)上面的功能：

async function getResponseSize(url) {
  const response = await fetch(url);
  const reader = response.body.getReader();
  let result = await reader.read();
  let total = 0;

  while (!result.done) {
    const value = result.value;
    total += value.length;
    console.log("Received chunk", value);
    // get the next result
    result = await reader.read();
  }

  return total;
}

所有的"聰明"的代碼都不見(jiàn)了?，F(xiàn)在新的異步循環(huán)使用了可靠的，看起來(lái)普通的while循環(huán)來(lái)代替，這使我感覺(jué)非常的整潔。更多的是，在將來(lái)，我們將會(huì)使用async iterators,它將會(huì)使用for of循環(huán)來(lái)代替while循環(huán)，那這講會(huì)變得更加整潔！

 提示:  我對(duì)streams比較有好感。如果你對(duì)streams不太熟悉，可以看看我的指南

我們已經(jīng)看過(guò)了async function() {} 的使用方式，但是async關(guān)鍵字還可以用于其他的函數(shù)語(yǔ)法中。

箭頭函數(shù)

// map some URLs to json-promises
const jsonPromises = urls.map(async url => {
  const response = await fetch(url);
  return response.json();
});

 提示:  array.map(func)不會(huì)在乎你給的是否是async函數(shù)，它只會(huì)把它當(dāng)做一個(gè)返回值是promise的普通函數(shù)。所以，第二個(gè)回調(diào)的執(zhí)行并不會(huì)等待第一個(gè)回調(diào)中的await處理完成。

對(duì)象方法

const storage = {
  async getAvatar(name) {
    const cache = await caches.open("avatars");
    return cache.match(`/avatars/${name}.jpg`);
  }
};

storage.getAvatar("jaffathecake").then(…);

類方法

class Storage {
  constructor() {
    this.cachePromise = caches.open("avatars");
  }

  async getAvatar(name) {
    const cache = await this.cachePromise;
    return cache.match(`/avatars/${name}.jpg`);
  }
}

const storage = new Storage();
storage.getAvatar("jaffathecake").then(…);

 提示: 類的 constructors和getters/settings不能是 async 函數(shù)。

盡管你正在寫(xiě)的代碼看起來(lái)是同步的，但請(qǐng)確保你沒(méi)有錯(cuò)失并行處理的機(jī)會(huì)。

async function series() {
  await wait(500);
  await wait(500);
  return "done!";
}

上面的代碼需要 1000ms才能完成，然而：

async function parallel() {
 const wait1 = wait(500);
 const wait2 = wait(500);
 await wait1;
 await wait2;
 return "done!";
}

上面的代碼只需要500ms，因?yàn)閮蓚€(gè)wait在同一時(shí)間處理了。

假設(shè)我們想要獲取一系列的URL響應(yīng)信息，并將它們盡可能快的按正確的順序打印出來(lái)。
深呼吸....下面就是使用promise來(lái)實(shí)現(xiàn)的代碼：

function logInOrder(urls) {
  // fetch all the URLs
  const textPromises = urls.map(url => {
    return fetch(url).then(response => response.text());
  });

  // log them in order
  textPromises.reduce((chain, textPromise) => {
    return chain.then(() => textPromise)
      .then(text => console.log(text));
  }, Promise.resolve());
}

Yeah, 這達(dá)到了目的。我正在用reduce來(lái)處理一串的promise，我太"聰明"了。這是一個(gè)如此"聰明"的代碼，但我們最好不要這樣做。

但是，當(dāng)把上面的代碼轉(zhuǎn)換成使用 async函數(shù)來(lái)實(shí)現(xiàn)時(shí)，它看起來(lái)太有順序了，以至于會(huì)使我們很迷惑：

:-1: 不推薦 - 過(guò)于強(qiáng)調(diào)先后順序

async function logInOrder(urls) {
  for (const url of urls) {
    const response = await fetch(url);
    console.log(await response.text());
  }
}

看起來(lái)整潔多了，但是我的第二個(gè)請(qǐng)求只有在第一個(gè)請(qǐng)求被完全處理完成之后才會(huì)發(fā)出去，以此類推。這個(gè)比上面那個(gè)promise的實(shí)例慢多了。幸好這還有一個(gè)中立的方案：

:+1: 推薦 - 很好而且并行

async function logInOrder(urls) {
  // fetch all the URLs in parallel
  const textPromises = urls.map(async url => {
    const response = await fetch(url);
    return response.text();
  });

  // log them in sequence
  for (const textPromise of textPromises) {
    console.log(await textPromise);
  }
}

在這個(gè)例子中，全部的url一個(gè)接一個(gè)被請(qǐng)求和處理，但是那個(gè)"聰明的"的reduce被標(biāo)準(zhǔn)的，普通的和更具可讀性的for loop 循環(huán)取代了。

在我寫(xiě)這篇文章時(shí)，Chrome 55已經(jīng)默認(rèn)支持async 函數(shù)。但是在所有主流瀏覽器中，它還在開(kāi)發(fā)中：

Edge - In build 14342+ behind a flag

Firefox - active development

Safari - active development

所有的主流瀏覽器的最新版本都支持generators，如果你正在使用它們，你可以稍稍polyfill一下 async函數(shù).

Babel正可以為你做這些事情，這里有個(gè)通過(guò)Babel REPL寫(xiě)的示例 - 是不是感覺(jué)對(duì)轉(zhuǎn)換后的代碼很熟悉。這個(gè)轉(zhuǎn)換機(jī)制是 Babel"s es2017 preset的一部分。

 提示: Babel REPL是一個(gè)很有趣的東西，試試吧。

我建議你現(xiàn)在就這樣做，因?yàn)楫?dāng)你的目標(biāo)瀏覽器支持了async函數(shù)時(shí)，你只需要將Babel從你的項(xiàng)目中去除即可。但是如果你真的不想使用轉(zhuǎn)換工具，你可以使用Babel"s polyfill。

async function slowEcho(val) {
  await wait(1000);
  return val;
}

當(dāng)你使用了上面說(shuō)的polyfill,你可以將上面的代碼替換為：

const slowEcho = createAsyncFunction(function*(val) {
  yield wait(1000);
  return val;
});

注意到你通過(guò)給createAsyncFunction函數(shù)傳遞了一個(gè)generator (function*),然后使用yield 代替 await。除此之外它們的效果一樣。

如果你想要兼容舊的瀏覽器，Babel同樣也能把generators給轉(zhuǎn)換了，這樣你就可以在IE8以上的瀏覽器中使用async函數(shù)，但你需要使用Babel的 es2017 preset和 the es2015 preset

你會(huì)看到轉(zhuǎn)換后的代碼并不好看，所以請(qǐng)小心代碼膨脹。

一旦所有瀏覽器都支持async函數(shù)了，請(qǐng)?jiān)谒蟹祷刂凳?b>promise的函數(shù)上使用async！因?yàn)樗粌H可以使你的代碼更tider， 而且它確保了async函數(shù) 總是返回一個(gè) promise 。

回到 2014 年,我對(duì)async函數(shù)的出現(xiàn)感到非常激動(dòng), 現(xiàn)在很高興看到它們?cè)跒g覽器中被支持了。Whoop!