摘要：的出現(xiàn)，讓我們可以走出回調(diào)地獄，著實(shí)驚艷。我已經(jīng)開(kāi)始使用里的和關(guān)鍵字來(lái)簡(jiǎn)化的處理。異步任務(wù)在這個(gè)例子是執(zhí)行之后，一直在執(zhí)行完成才繼續(xù)下一個(gè)任務(wù)并沒(méi)有產(chǎn)生阻塞。最后這個(gè)函數(shù)處理了返回值并且返回了一個(gè)對(duì)象。依然很棒，但和使得它可維護(hù)性更好。

JavaScript Promises的出現(xiàn)，讓我們可以走出回調(diào)地獄，著實(shí)驚艷。Promises 允許我們更好的引入和處理異步任務(wù)，雖然如此，但引入好多的 then 還是會(huì)讓代碼變的混亂。我已經(jīng)開(kāi)始使用 ES2017 里的 async 和 await 關(guān)鍵字來(lái)簡(jiǎn)化 promises 的處理。讓我們一睹 async 和 await 的風(fēng)采！

async 是函數(shù)聲明的關(guān)鍵字

await 用于 promises 處理過(guò)程中

await 必須用在 async 聲明的函數(shù)內(nèi)部，雖然 Chrome 已經(jīng)支持“頂級(jí)的”的 await

async 函數(shù)返回 promises 對(duì)象，不關(guān)心函數(shù)的返回值是什么

async/await 和 promises 的底層實(shí)現(xiàn)是一樣的

大多數(shù)瀏覽器和 Nodejs 已經(jīng)可用

代碼更加清晰簡(jiǎn)潔

更少的回調(diào)，調(diào)試更加簡(jiǎn)單

容易從 promises 中的 then / catch 轉(zhuǎn)換

代碼看起來(lái)自上而下，更少的縮進(jìn)。

從實(shí)例入手要更簡(jiǎn)單，我們先來(lái)看一個(gè)簡(jiǎn)單的 async/await 的使用方法：

// 使用 async 定義函數(shù)，然后 await 才能使用
async function fetchContent() {
  // Instead of using fetch().then, use await
  let content = await fetch("/");
  let text = await content.text();
  
  // async 函數(shù)內(nèi)，text 是響應(yīng)值
  console.log(text);

  // Resolve this async function with the text
  return text;
}

// Use the async function
var promise = fetchContent().then(...);

首先使用 async 聲明函數(shù)；聲明之后，await 可以用在該函數(shù)內(nèi)部。await 關(guān)鍵字后面跟 promise：fetch API。異步任務(wù)（在這個(gè)例子是 fetch）執(zhí)行之后，一直在執(zhí)行完成才繼續(xù)下一個(gè)任務(wù)（并沒(méi)有產(chǎn)生阻塞）。最后這個(gè)函數(shù)處理了返回值并且返回了一個(gè) promises 對(duì)象。

代碼自上而下，告別回調(diào)，異步處理變的更加簡(jiǎn)單！

當(dāng)時(shí)間允許，你一定很想將你的 promise 的代碼升級(jí)到 await，讓我們看下該怎么做：

// Before: callback city!
fetch("/users.json")
  .then(response => response.json())
  .then(json => {
    console.log(json);
  })
  .catch(e => { console.log("error!"); })

// After: no more callbacks!
async function getJson() {
  try {
    let response = await fetch("/users.json");
    let json = await response.json();
    console.log(json);
  }
  catch(e) {
    console.log("Error!", e);
  }
}

從使用多個(gè) then 到 await 十分簡(jiǎn)單，但你的代碼的維護(hù)性變得很高。

聲明 async 函數(shù)有以下方式：

let main = (async function() {
  let value = await fetch("/");
})();

async function main() {
  let value = await fetch("/");
};

let main = async function() {
  let value = await fetch("/");
};

// Arrow functions too!
let main = async () => {
  let value = await fetch("/");
};

document.body.addEventListener("click", async function() {
  let value = await fetch("/");
});

// Object property
let obj = {
  async method() {
    let value = await fetch("/");
  }
};

// Class methods
class MyClass {
  async myMethod() {
    let value = await fetch("/");
  }
}

正如你看到的，增加 async 函數(shù)十分簡(jiǎn)單，而且能很好的適用各種函數(shù)創(chuàng)建的流程。

傳統(tǒng)的 promises 允許使用 catch 回調(diào)處理 rejection，當(dāng)你使用 await，最好使用 try/catch：

try {
  let x = await myAsyncFunction();
}
catch(e) {
 // Error!
}

老式的 try/catch 不如 promises 的 catch 優(yōu)雅，但在這里，它很給力！

Google 的Jake Archibald在Async functions document中提出了一個(gè)完美的觀點(diǎn)：不要用 await 使得任務(wù)變的太序列化。也就是說(shuō)對(duì)于可以同時(shí)執(zhí)行的任務(wù)，先觸發(fā)任務(wù)然后再使用 await，而不是直接使用 await 使得任務(wù)像堆棧式一樣的存儲(chǔ)。

// Will take 1000ms total!
async function series() {
  await wait(500);
  await wait(500);
  return "done!";
}

// Would take only 500ms total!
async function parallel() {
  const wait1 = wait(500);
  const wait2 = wait(500);
  await wait1;
  await wait2;
  return "done!";
}

第一個(gè)代碼塊反面例子，第二個(gè) await 需要等待第一個(gè) await 執(zhí)行完畢后才執(zhí)行，第二個(gè)代碼塊是一個(gè)更好的方法，同時(shí)觸發(fā)了兩個(gè)任務(wù)，然后才使用 await；這樣做可以使得多個(gè)異步操作同時(shí)執(zhí)行！

Primises API 中我最愛(ài)的 API 之一就是 Promise.all：當(dāng)多有任務(wù)完成后才會(huì)觸發(fā)回調(diào)。async / await 中沒(méi)有等價(jià)的操作，但是這篇文章提供了一個(gè)很好的解決方案：

let [foo, bar] = await Promise.all([getFoo(), getBar()]);

請(qǐng)記住，async / await和 promises 在底層實(shí)現(xiàn)上是一致的，所以我們可以簡(jiǎn)單的等待（await）所有的 promises 任務(wù)結(jié)束!

現(xiàn)在大多數(shù)瀏覽器都可以使用 async 和 await，Nodejs 一樣可用，老版本的Nodejs可以使用 transform-async-to-generator 這個(gè) babel 插件來(lái)使用 async 和 await。Promises 依然很棒，但 async 和 await 使得它可維護(hù)性更好。

原文地址：https://davidwalsh.name/async...

博客原地址：http://zhaojizong.online/post...