Callbacks, Promises, Async Await

筆記整理

JavaScript 是一個同步語言，然而許多情況會需要用到非同步處理，像是撈取資料。以前有 callback 協助處理，後來 ES6 出現 promise ，ES7 出現 Async & Await 處理(將非同步的程式碼寫成類似同步的形式)。此篇文章整理 Async JS Crash Course — Callbacks, Promises, Async Await 這支教學影片的重點及程式碼。

準備資料

首先，自訂 posts 資料，可以想像成 api 抓取網站的資料。撰寫 getPosts function，其中使用 setTimeout 實現非同步。瀏覽器會在一秒後將 posts1 & posts2 印出。

加入第二個function

此非完整 index.js 檔案

加上 createPost function，也用 setTimeout 實現非同步，特別值得注意的是秒數設定為 2 秒(getPost function只有設定 1 秒)！在這樣的情況下，createPost 完成時，getPost 已經把兩筆 post 打印完成了。如果把這邊的 2 秒 改成小於 1 秒的時間，getPost會把完整的三筆都打印出來。由於無法完整確保 createPost 先完成，所以使用 callback 來解決這個痛點。

Callback

將原本的 getPost function 改成 createPost 的參數，以 callback 形式呼叫。這樣可以確保 createPost 會先新的 post push 上去再顯示。

在 ES6 引進 Promise 之後，callback 可以用 Promise 改寫。

ES6 — Promise

此非完整 index.js 檔案

把原本 callback 移除，而原本的 createPost 以 return Promise 形式改寫，Promise 包含了 resolve(成功) & reject(有誤) 對應到 then 繼續處理或是 catch error。

Promise 寫法改善了 callback，但順序上仍有些不直觀，ES7 async + await 更加優化。

ES7 — Async, Await

此非完整 index.js 檔案

await 必須寫在 async 之中，await 會等待函式完成後再往下繼續執行。藉由 try, catch 做捕捉。

📐✏️ 📏

若有任何錯誤請在下方留言～🙏 Thanks!