如何簡(jiǎn)單理解 JavaScript 的 Async 和 Await？

自從Async 和Await 出現(xiàn)后，大幅簡(jiǎn)化JAVAScript 同步和非同步（異步）的復(fù)雜糾葛，這篇文章將會(huì)分享我自己理解的歷程，實(shí)站await 等待、連續(xù)輸入文字、fetch 和回調(diào)應(yīng)用，讓這些過去需要層層callback才能完成的流程，透過 Async 和 Await 輕松的進(jìn)行扁平化處理吧！

什么是async？什么是await？

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

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

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

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

如何簡(jiǎn)單理解 JavaScript 的 Async 和 Await？

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

利用async 和 await 做個(gè)「漂亮的等待」

了解 async 和 await 的意思之后，就來(lái)試試看做個(gè)「漂亮的等待」：

如果我們把上面的范例修改為 async 和 await 的寫法，突然就發(fā)現(xiàn)代碼看起來(lái)非常的干凈，因?yàn)?await 會(huì)等待收到 resolve 之后才會(huì)進(jìn)行后面的動(dòng)作，如果沒有收到就會(huì)一直處在等待的狀態(tài)，所以什么時(shí)候該等待，什么時(shí)候該做下一步，就會(huì)非常清楚明了，這也就是我所謂「漂亮的等待」。

注意，await 一定得運(yùn)行在async function 內(nèi)！

搭配Promise

基本上只要有 async 和 await 的地方，就一定有 promise 的存在，promise 顧名思義就是「保證執(zhí)行之后才會(huì)做什么事情」，剛剛使用了 async 、await 和 promise 改善 setTimeout這個(gè)容易出錯(cuò)的非同步等待，針對(duì) setInterval ，也能用同樣的做法修改，舉例來(lái)說，下面的代碼碼執(zhí)行之后，并「不會(huì)」如我們預(yù)期的「先顯示1，再顯示 haha0...haha5 ，最后再顯示2」，而是「先顯示1和2，然后再出現(xiàn) haha0...haha5」，因?yàn)殡m然程式邏輯是從上往下，但在count function里頭是非同步的語(yǔ)法，導(dǎo)致自己走自己的路，也造成了結(jié)果的不如預(yù)期。

時(shí)我們可以透過 async、await 和 promise 進(jìn)行修正，在顯示1之后，會(huì)「等待」count function結(jié)束后再顯示2。

setTimeout 和 setInterval ，這也可以應(yīng)用于「輸入文字」的場(chǎng)景，過去我們要做到「連續(xù)輸入」文字，可能要層層疊疊寫個(gè)好幾個(gè)callback，現(xiàn)在如果使用async和await，就能夠很簡(jiǎn)單的實(shí)現(xiàn)連續(xù)輸入的情境，程式碼看起來(lái)也更干凈簡(jiǎn)潔。

html結(jié)構(gòu)：

js代碼：

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

搭配Fetch

在上篇的文章 JavaScript Fetch API 使用教學(xué)已經(jīng)有提到 fetch 的用法，因?yàn)?fetch 最后回傳的是promise，理所當(dāng)然的通過async和await操作是最恰當(dāng)不過的。

舉例來(lái)說，先前往類似阿里云的獲取天氣 API 的平臺(tái)可以取得許多氣象資料，搜索某個(gè)城市的現(xiàn)在天氣報(bào)告，通過 fetch的json() 方法處理返回?cái)?shù)據(jù)，結(jié)果顯示出「北京市的即時(shí)氣溫」。

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

搭配循環(huán)

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

搭配async 和await，我們就能將同樣的做法，因?yàn)槭褂昧薬wait，所以每次執(zhí)行時(shí)，都會(huì)進(jìn)行「等待」，也就能做到字體慢慢變大的效果。

html結(jié)構(gòu)：

js代碼：

運(yùn)行效果：

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

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

原文作者：oxxostudio

由于網(wǎng)頁(yè)為繁體內(nèi)容，術(shù)語(yǔ)描述和話術(shù)與我們有差異的問題，筆者在保證不改變?cè)獾幕A(chǔ)上做了調(diào)整，并在此基礎(chǔ)上進(jìn)行了錯(cuò)誤校正，如發(fā)現(xiàn)問題，歡迎你的指正