1 分鐘讀完《10 分鐘學會 JavaScript 的 Async/Await》

1 分鐘讀完 JavaScript Async/Await Explained in 10 Minutes

之前咱們使用 callback。

後來咱們使用 Promise。

如今咱們使用 Async/Await。

一、什麼是 Async/Await？

Async - 定義異步函數(async function someName(){...})

• 自動把函數轉換爲 Promise
• 當調用異步函數時，函數返回值會被 resolve 處理
• 異步函數內部能夠使用 await

Await - 暫停異步函數的執行 (var result = await someAsyncCall();)

• 當使用在 Promise 前面時，await 等待 Promise 完成，並返回 Promise 的結果
• await 只能和 Promise 一塊兒使用，不能和 callback 一塊兒使用
• await 只能用在 async 函數中

二、Async/Await 是否會取代 Promise

不會。

• Async/Await 底層依然使用了 Promise。
• 多個異步函數同時執行時，須要藉助 Promise.all

async function getABC() {
  let A = await getValueA(); // getValueA 花費 2 秒
  let B = await getValueB(); // getValueA 花費 4 秒
  let C = await getValueC(); // getValueA 花費 3 秒

  return A*B*C;
}

每次遇到 await 關鍵字時，Promise 都會停下在，一直到運行結束，因此總共花費是 2+4+3 = 9 秒。await 把異步變成了同步。

async function getABC() {
  // Promise.all() 容許同時執行全部的異步函數
  let results = await Promise.all([ getValueA, getValueB, getValueC ]); 

  return results.reduce((total,value) => total * value);
}

函數總耗時爲 4 秒（getValueB 的耗時）。

三、Async/Await 的錯誤處理

在 Async/Await 語法中，咱們能夠使用 try/catch 進行錯誤處理。在 Promise 中的 .catch() 分支會進入 catch 語句。

---

閱讀原文：JavaScript Async/Await Explained in 10 Minutes

討論地址：10 分鐘學會 JavaScript 的 Async/Await

若是你想參與討論，請點擊這裏