自從Async 和Await 出現後，大幅簡化JavaScript 同步和非同步（異步）的複雜糾葛，這篇文章將會分享我自己理解的歷程，實站await 等待、連續輸入文字、fetch 和回調應用，讓這些過去需要層層callback才能完成的流程，透過 Async 和 Await 輕鬆的進行扁平化處理吧！
什麼是async？什麼是await？
在JavaScript的世界，同步sync和非同步async的愛恨情仇，就如同偶像劇一般的剪不斷理還亂，特別像是setTimeout、setInterval、MLHttpRequest或fetch這些同步非同步混雜的用法，都會讓人一個頭兩個大，幸好ES6出現了promise，ES7出現了async、await，幫助我們可以更容易的進行業務邏輯的編寫。
對於同步和非同步，最常見的說法是「同步模式下，每個任務必須按照順序執行，後面的任務必須等待前面的任務執行完成，非同步模式則相反，後面的任務不用等前面的，各自執行各自的任務」，但我覺得這樣實在不容易理解，不容易理解的地方在於「中文」的同步和非同步，可能和實際上的解釋剛好相反了(同步的中文字面意思是「一起走」，非同步的中文意思是「不要一起走」，超容易搞錯的)，因此如果你跟我一樣也很容易搞錯，可以使用我覺得比較好理解的方法：「同一個賽道vs不同賽道」，透過步道的方式，就更容易明白同步和非同步。
同步：在「同一個賽道」比賽「接力賽跑」，當棒子沒有交給我，我就得等你，不能跑。
非同步：在「不(非)同賽道」比賽「賽跑」，誰都不等誰，只要輪到我跑，我就開始跑。
自從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 出現後，大幅簡化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 出現後，大幅簡化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 內！
自從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 出現後，大幅簡化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。
自從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結構：
自從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代碼：
自從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」，接著顯示「北京市的氣溫」，最後顯示「氣溫結果」 )
自從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 出現後，大幅簡化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結構：
自從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代碼：
自從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代碼：
運行效果：
自從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 方法能容易辦到的囉～
自從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
由於網頁為繁體內容，術語描述和話術與我們有差異的問題，筆者在保證不改變原意的基礎上做了調整，並在此基礎上進行了錯誤校正，如發現問題，歡迎你的指正
小結
坦白說只要你一但熟悉了async 和await，就真的回不去了，雖然說callback 仍然是程式開發裡必備的功能，但對於同步和非同步之間的轉換，以後就交給async 和await來處理吧！
簡單瞭解之後，如果你想深入學習的話，筆者建議你看看我以前寫的兩篇文章：「JavaScript基礎」Promise使用指南、「JavaScript基礎」深入學習async/await，相信你看完後會有不小的收穫。
更多精彩內容，請關注“前端達人”公眾號