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

justjavac發表於2017-11-01
JavaScriptAI

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

10 分鐘學會 JavaScript 的 Async/Await
10 分鐘學會 JavaScript 的 Async/Await

以前我們使用 callback。

後來我們使用 Promise。

現在我們使用 Async/Await。

1、什麼是 Async/Await？

Async - 定義非同步函式(async function someName(){...})

  • 自動把函式轉換為 Promise
  • 當呼叫非同步函式時，函式返回值會被 resolve 處理
  • 非同步函式內部可以使用 await

Await - 暫停非同步函式的執行 (var result = await someAsyncCall();)

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

2、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 的耗時）。

3、Async/Await 的錯誤處理

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

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

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

如果你想參與討論，請點選這裡

相關文章