摘要：的出現，讓我們可以走出回調地獄，著實驚艷。我已經開始使用里的和關鍵字來簡化的處理。異步任務在這個例子是執行之后，一直在執行完成才繼續下一個任務并沒有產生阻塞。最后這個函數處理了返回值并且返回了一個對象。依然很棒，但和使得它可維護性更好。

JavaScript Promises的出現，讓我們可以走出回調地獄，著實驚艷。Promises 允許我們更好的引入和處理異步任務，雖然如此，但引入好多的 then 還是會讓代碼變的混亂。我已經開始使用 ES2017 里的 async 和 await 關鍵字來簡化 promises 的處理。讓我們一睹 async 和 await 的風采！

async 是函數聲明的關鍵字

await 用于 promises 處理過程中

await 必須用在 async 聲明的函數內部，雖然 Chrome 已經支持“頂級的”的 await

async 函數返回 promises 對象，不關心函數的返回值是什么

async/await 和 promises 的底層實現是一樣的

大多數瀏覽器和 Nodejs 已經可用

代碼更加清晰簡潔

更少的回調，調試更加簡單

容易從 promises 中的 then / catch 轉換

代碼看起來自上而下，更少的縮進。

從實例入手要更簡單，我們先來看一個簡單的 async/await 的使用方法：

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

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

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

首先使用 async 聲明函數；聲明之后，await 可以用在該函數內部。await 關鍵字后面跟 promise：fetch API。異步任務（在這個例子是 fetch）執行之后，一直在執行完成才繼續下一個任務（并沒有產生阻塞）。最后這個函數處理了返回值并且返回了一個 promises 對象。

代碼自上而下，告別回調，異步處理變的更加簡單！

當時間允許，你一定很想將你的 promise 的代碼升級到 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);
  }
}

從使用多個 then 到 await 十分簡單，但你的代碼的維護性變得很高。

聲明 async 函數有以下方式：

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 函數十分簡單，而且能很好的適用各種函數創建的流程。

傳統的 promises 允許使用 catch 回調處理 rejection，當你使用 await，最好使用 try/catch：

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

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

Google 的Jake Archibald在Async functions document中提出了一個完美的觀點：不要用 await 使得任務變的太序列化。也就是說對于可以同時執行的任務，先觸發任務然后再使用 await，而不是直接使用 await 使得任務像堆棧式一樣的存儲。

// 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!";
}

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

Primises API 中我最愛的 API 之一就是 Promise.all：當多有任務完成后才會觸發回調。async / await 中沒有等價的操作，但是這篇文章提供了一個很好的解決方案：

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

請記住，async / await和 promises 在底層實現上是一致的，所以我們可以簡單的等待（await）所有的 promises 任務結束!

現在大多數瀏覽器都可以使用 async 和 await，Nodejs 一樣可用，老版本的Nodejs可以使用 transform-async-to-generator 這個 babel 插件來使用 async 和 await。Promises 依然很棒，但 async 和 await 使得它可維護性更好。

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

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