課程介紹

在軟件開發(fā)領(lǐng)域，簡潔的代碼 => 容易閱讀的代碼 => 容易維護的代碼，而 ES2017 中的 async/await 特性能讓我們編寫出相比回調(diào)地獄和 Promise 鏈式調(diào)用更直觀、更容易理解的代碼，await 關(guān)鍵字接收一個 Promise，等待代碼執(zhí)行，直到 Promise 狀態(tài)變?yōu)?resolved 或者 rejected，這種特性能讓我們的異步代碼閱讀起來更像是同步代碼。

本課程共 8 小節(jié) 20 分鐘，將會從編寫簡單的 async/await 函數(shù)開始，用實例帶領(lǐng)大家探索 async/await 實戰(zhàn)的方方面面，比如如何結(jié)合 Promise 和 await 關(guān)鍵字？如何定義不同類型的 async 函數(shù)？如何安全的使用 async/await，即處理錯誤？如何讓多個 await 串行或并行？如何在循環(huán)中正確使用 await？

適用人群

• [required] 具備 JS 基礎(chǔ)知識，知道如何運行 Node.js 腳本；
• [required] 知道 Callback、Promise 等異步處理概念；
• [optional] 期望學習新的異步特性，編寫更簡潔易懂易維護的代碼；
• [optional] 期望不斷打磨自己的 JS 技能，讓自己變得更值錢；

內(nèi)容目錄

1. 編寫第一個 async/await 函數(shù)

手把手教你把發(fā)起 HTTP 請求并解析響應(yīng)的代碼改寫成 async/await 風格，讓你學會 async/await 的基本語法。

2. 將 async 函數(shù)用在 Promise 鏈中

帶你探索如何在 Promise 鏈中像使用其他 Promise 一樣無縫使用 async 函數(shù)。

3. 把任意類型的函數(shù)轉(zhuǎn)成 async 風格

實例演示如何將任意函數(shù)寫成 async 風格，包括函數(shù)聲明、函數(shù)表達式、箭頭函數(shù)、類方法、對象方法等。

4. 處理 async 函數(shù)中的錯誤

不同于 Promise 中的 .catch() 錯誤處理機制，在 async 函數(shù)中，我們需要使用 try/catch 結(jié)構(gòu)來恰當?shù)奶幚礤e誤。

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

學會通過移動 await 關(guān)鍵詞的位置實現(xiàn)多個 await 操作串行或者并行，并且用數(shù)據(jù)證明讓多個異步操作并行的性能優(yōu)勢。

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

學會使用 ES2015 中的解構(gòu)和 Promise.all() 實現(xiàn)多個異步操作的并行，非常適合需要同時發(fā)起多個請求的情形，代碼可讀性不打折扣。

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

await 操作符并不僅僅局限于 ES2015 的 Promise，可以和任意兼容 .then() 方法的代碼使用，通過實例學會如何與流行的 Promise 庫結(jié)合使用。

8. 在 for 循環(huán)中正確的使用 await

理解 for 循環(huán)中 await 不同寫法帶來的性能影響，以及改進的方法。

源碼鏈接

代碼倉庫：wangshijun/course-javascript-async-await

運行方法（請確保系統(tǒng)中安裝了 Node.js）：

git clone https://github.com/wangshijun/course-javascript-async-await.git cd course-javascript-async-await node xxx.js

上面的 xxx.js 對應(yīng)每節(jié)課程的源碼，列表如下：

編寫第一個 async/await 函數(shù)

將 async 函數(shù)用在 Promise chain 中

把任意類型的函數(shù)轉(zhuǎn)成 async 風格

處理 async 函數(shù)中的錯誤

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

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

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

在 for 循環(huán)中正確的使用 await

運行環(huán)境

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

參考資料

• Google Web Fundamentals

視頻下載

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

題外話

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。