如何簡單理解 JavaScript 的 Async 和 Await？

自從Async 和Await 出現后，大幅簡化JAVAScript 同步和非同步（異步）的復雜糾葛，這篇文章將會分享我自己理解的歷程，實站await 等待、連續輸入文字、fetch 和回調應用，讓這些過去需要層層callback才能完成的流程，透過 Async 和 Await 輕松的進行扁平化處理吧！

什么是async？什么是await？

在JavaScript的世界，同步sync和非同步async的愛恨情仇，就如同偶像劇一般的剪不斷理還亂，特別像是setTimeout、setInterval、MLHttpRequest或fetch這些同步非同步混雜的用法，都會讓人一個頭兩個大，幸好ES6出現了promise，ES7出現了async、await，幫助我們可以更容易的進行業務邏輯的編寫。

對于同步和非同步，最常見的說法是「同步模式下，每個任務必須按照順序執行，后面的任務必須等待前面的任務執行完成，非同步模式則相反，后面的任務不用等前面的，各自執行各自的任務」，但我覺得這樣實在不容易理解，不容易理解的地方在于「中文」的同步和非同步，可能和實際上的解釋剛好相反了(同步的中文字面意思是「一起走」，非同步的中文意思是「不要一起走」，超容易搞錯的)，因此如果你跟我一樣也很容易搞錯，可以使用我覺得比較好理解的方法：「同一個賽道vs不同賽道」，透過步道的方式，就更容易明白同步和非同步。

同步：在「同一個賽道」比賽「接力賽跑」，當棒子沒有交給我，我就得等你，不能跑。

非同步：在「不(非)同賽道」比賽「賽跑」，誰都不等誰，只要輪到我跑，我就開始跑。

在ES7里頭 async 的本質是 promise 的語法糖(包裝得甜甜的比較好吃下肚)，只要 function標記為 async，就表示里頭可以編寫 await 的同步語法，而 await 顧名思義就是「等待」，它會確保一個 promise 物件都解決( resolve )或出錯( reject )后才會進行下一步，當 async function 的內容全都結束后，會返回一個 promise ，這表示后方可以使用 .then 語法來做連接，基本的程式長相就像下面這樣：

利用async 和 await 做個「漂亮的等待」

了解 async 和 await 的意思之后，就來試試看做個「漂亮的等待」：

如果我們把上面的范例修改為 async 和 await 的寫法，突然就發現代碼看起來非常的干凈，因為 await 會等待收到 resolve 之后才會進行后面的動作，如果沒有收到就會一直處在等待的狀態，所以什么時候該等待，什么時候該做下一步，就會非常清楚明了，這也就是我所謂「漂亮的等待」。

注意，await 一定得運行在async function 內！

搭配Promise

基本上只要有 async 和 await 的地方，就一定有 promise 的存在，promise 顧名思義就是「保證執行之后才會做什么事情」，剛剛使用了 async 、await 和 promise 改善 setTimeout這個容易出錯的非同步等待，針對 setInterval ，也能用同樣的做法修改，舉例來說，下面的代碼碼執行之后，并「不會」如我們預期的「先顯示1，再顯示 haha0...haha5 ，最后再顯示2」，而是「先顯示1和2，然后再出現 haha0...haha5」，因為雖然程式邏輯是從上往下，但在count function里頭是非同步的語法，導致自己走自己的路，也造成了結果的不如預期。

時我們可以透過 async、await 和 promise 進行修正，在顯示1之后，會「等待」count function結束后再顯示2。

setTimeout 和 setInterval ，這也可以應用于「輸入文字」的場景，過去我們要做到「連續輸入」文字，可能要層層疊疊寫個好幾個callback，現在如果使用async和await，就能夠很簡單的實現連續輸入的情境，程式碼看起來也更干凈簡潔。

html結構：

js代碼：

insertAdjacentHTML() 將指定的文本解析為HTML或XML，并將結果節點插入到DOM樹中的指定位置。它不會重新解析它正在使用的元素，因此它不會破壞元素內的現有元素。這避免了額外的序列化步驟，使其比直接innerHTML操作更快。

搭配Fetch

在上篇的文章 JavaScript Fetch API 使用教學已經有提到 fetch 的用法，因為 fetch 最后回傳的是promise，理所當然的通過async和await操作是最恰當不過的。

舉例來說，先前往類似阿里云的獲取天氣 API 的平臺可以取得許多氣象資料，搜索某個城市的現在天氣報告，通過 fetch的json() 方法處理返回數據，結果顯示出「北京市的即時氣溫」。

透過 async 和 await 的簡化代碼，得到的結果完全不需要 callback 的輔助，就能按照我們所期望的順序進行。( 先顯示「開始調用API」，接著顯示「北京市的氣溫」，最后顯示「氣溫結果」 )

搭配循環

如果要通過 JavaScript 實現「文字慢慢變大」的效果，除了透過css的transition設定之外，通常就是直接使用 setInterval 來完成，就像下面的代碼這樣：

搭配async 和await，我們就能將同樣的做法，因為使用了await，所以每次執行時，都會進行「等待」，也就能做到字體慢慢變大的效果。

html結構：

js代碼：

運行效果：

同樣的，上面提到的fetch 或是輸入文字，只要做成await 的方式，都可以放在循環里面使用，例如通過循環不斷的 fetch 資料、通過循環不斷的輸入文字...等，這些就不是callback 方法能容易辦到的啰～

文章參考來源：https://www.oxxostudio.tw/articles/201908/js-async-await.html

原文作者：oxxostudio

由于網頁為繁體內容，術語描述和話術與我們有差異的問題，筆者在保證不改變原意的基礎上做了調整，并在此基礎上進行了錯誤校正，如發現問題，歡迎你的指正