玩轉非同步 JS ：async/await 簡明教程（附視訊下載）

王仕軍發表於2017-11-10
非同步JSAI

課程介紹

在軟體開發領域，簡潔的程式碼 => 容易閱讀的程式碼 => 容易維護的程式碼，而 ES2017 中的 async/await 特效能讓我們編寫出相比回撥地獄和 Promise 鏈式呼叫更直觀、更容易理解的程式碼，await 關鍵字接收一個 Promise，等待程式碼執行，直到 Promise 狀態變為 resolved 或者 rejected，這種特效能讓我們的非同步程式碼閱讀起來更像是同步程式碼。

本課程共 8 小節 20 分鐘，將會從編寫簡單的 async/await 函式開始，用例項帶領大家探索 async/await 實戰的方方面面，比如如何結合 Promise 和 await 關鍵字？如何定義不同型別的 async 函式？如何安全的使用 async/await，即處理錯誤？如何讓多個 await 序列或並行？如何在迴圈中正確使用 await？

適用人群

  • [required] 具備 JS 基礎知識，知道如何執行 Node.js 指令碼；
  • [required] 知道 Callback、Promise 等非同步處理概念；
  • [optional] 期望學習新的非同步特性，編寫更簡潔易懂易維護的程式碼；
  • [optional] 期望不斷打磨自己的 JS 技能，讓自己變得更值錢；

內容目錄

1. 編寫第一個 async/await 函式

手把手教你把發起 HTTP 請求並解析響應的程式碼改寫成 async/await 風格，讓你學會 async/await 的基本語法。

2. 將 async 函式用在 Promise 鏈中

帶你探索如何在 Promise 鏈中像使用其他 Promise 一樣無縫使用 async 函式。

3. 把任意型別的函式轉成 async 風格

例項演示如何將任意函式寫成 async 風格，包括函式宣告、函式表示式、箭頭函式、類方法、物件方法等。

4. 處理 async 函式中的錯誤

不同於 Promise 中的 .catch() 錯誤處理機制，在 async 函式中，我們需要使用 try/catch 結構來恰當的處理錯誤。

5. 正確處理多個 await 操作的並行序列

學會通過移動 await 關鍵詞的位置實現多個 await 操作序列或者並行，並且用資料證明讓多個非同步操作並行的效能優勢。

6. 使用 Promise.all() 讓多個 await 操作並行

學會使用 ES2015 中的解構和 Promise.all() 實現多個非同步操作的並行，非常適合需要同時發起多個請求的情形，程式碼可讀性不打折扣。

7. 結合 await 和任意相容 .then() 的程式碼

await 操作符並不僅僅侷限於 ES2015 的 Promise，可以和任意相容 .then() 方法的程式碼使用，通過例項學會如何與流行的 Promise 庫結合使用。

8. 在 for 迴圈中正確的使用 await

理解 for 迴圈中 await 不同寫法帶來的效能影響，以及改進的方法。

原始碼連結

程式碼倉庫：wangshijun/course-javascript-async-await

執行方法（請確保系統中安裝了 Node.js）：

git clone https://github.com/wangshijun/course-javascript-async-await.git
cd course-javascript-async-await
node xxx.js複製程式碼

上面的 xxx.js 對應每節課程的原始碼，列表如下：

  1. 編寫第一個 async/await 函式
  2. 將 async 函式用在 Promise chain 中
  3. 把任意型別的函式轉成 async 風格
  4. 處理 async 函式中的錯誤
  5. 正確處理多個 await 操作的並行序列
  6. 使用 Promise.all() 讓多個 await 操作並行
  7. 結合 await 和任意相容 .then() 的程式碼
  8. 在 for 迴圈中正確的使用 await

執行環境

  • Node.js v8.6.0
  • VSCode v1.17.1 + Vim

參考資料

視訊下載

關注《前端週刊》微信公眾號，回覆 course-async-await 即可獲取高清視訊教程下載地址。

題外話

最後，可能你有同學會問，我為什麼要做這個公開課？接下來的計劃是什麼？請閱讀好久不見，我總感覺欠你點什麼

相關文章