課程介紹

在軟件開發領域，簡潔的代碼 => 容易閱讀的代碼 => 容易維護的代碼，而 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 對應每節課程的源碼，列表如下：

編寫第一個 async/await 函數

將 async 函數用在 Promise chain 中

把任意類型的函數轉成 async 風格

處理 async 函數中的錯誤

正確處理多個 await 操作的并行串行

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

結合 await 和任意兼容 .then() 的代碼

在 for 循環中正確的使用 await

運行環境

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

參考資料

• Google Web Fundamentals

視頻下載

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

題外話

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

總結

以上是生活随笔為你收集整理的玩转异步 JS ：async/await 简明教程（附视频下载）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。