快點上車，前端異步編程發車了
本文轉載自微信公眾號「零零后程序員小三」，作者003 。轉載本文請聯系零零后程序員小三公眾號。
什么是異步編程?
異步編程允許我們在執行一個長時間任務的時候，程序不用進行等待就可以繼續執行后面的代碼，直到任務完成后再以回調函數(callback)的方式回頭通知你
這種編程模式避免了程序的阻塞，提高了效率，它適用于那些網絡請求或者數據庫操作的應用。
實現異步的方式
回調函數，是最簡單的實現異步的方式
- console.log('111');
- setTimeout(() => {
- console.log("222");
- }, 2000)
- console.log('333');
雖然，按照html文檔的輸出規則他是自上而下，但是在中間加了一個定時器，然后瀏覽器識別到了它，會馬上執行，然后執行后面的代碼，等到了給定時間，會以回調函數的方式返回。
在JS的設計之初，他一開始就是單線程的編程語言，盡管這里回調函數看上去和主線程一起進行的，但是都運行在一個線程中，況且主線程還運行其他代碼。
雖然JS只有一個線程，但是還是有比較不錯的優點的。因為所有的操作都在一個線程之中，所以不用去考慮資源競爭的問題，而且在源頭就避開了線程之間的頻繁切換，從而降低了線程開銷
但是它也有一個致命的缺點，如果我們需要進行多個異步操作，我們可能會寫出下面的代碼
- console.log("111");
- setTimeout(() => {
- console.log("三秒后執行1");
- setTimeout(() => {
- console.log("三秒后執行2");
- setTimeout(() => {
- console.log("三秒后執行3");
- setTimeout(() => {
- console.log("三秒后執行4");
- }, 3000)
- }, 3000);
- }, 3000);
- }, 3000);
- console.log("333");
如果再有別的回調，這樣會更恐怖，一直寫下去，換誰都看得心慌。我們管這個叫回調地獄
解決回調地獄
為了解決這個回調地獄，Promise誕生了。
我們在頁面中動態的更新數據，也就是AJAX技術，就是使用Promise的API fetch()實現的
我們可以試一試用fetch()獲取一個接口的數據
通過運行可知道他返回的是一個Promise對象，但是我們還沒有獲得我們想要的數據，因為Promise翻譯一下就是承諾的意思，所以，他應該會在后來給我們實現我們想要的需求，所以，我在后面加個then，then翻譯一下就也是然后的意思
所以就是傳入它的then方法并傳入一個回調函數，如果在后來這個請求成功之后，然后回調函數會被調起，請求的函數會被作為一個參數傳入
- fetch("http://jsonplaceholder.typicode.com/posts/1")
- .then((response)=> ...)
但是如果這樣看來Promise和回調函數就沒有區別了。
但是，Promise的優點在于它可以用一種鏈式結構將多個異步操作串聯起來
也就是 比如下面的response.json()方法也會返回一個Promise，然后then之后就是將未來返回的response轉換為json格式，
- fetch("http://jsonplaceholder.typicode.com/posts/1")
- .then((response)=>response.json())
然后我們還可以繼續追加我們想要進行的操作，直接then下去，比如下面這樣把結果打印出來或者把結果存到某個容器中等
- fetch("http://jsonplaceholder.typicode.com/posts/1")
- .then((response)=>response.json())
- .then((json) => console.log(json))
Promise的鏈式調用避免了代碼層層嵌套，盡管有很長的鏈式調用，但也只是將代碼向下方增長而不是向右。可讀性會大大提高。
但是在使用異步操作的時候也會遇到錯誤，比如各種網絡問題以及數據格式不正確等。然后我們可以通過在末尾添加一個catch()來捕獲這些錯誤，如果之前任意一個階段發生了錯誤，那么catch會被觸發，然后之后的then將不會再執行
這跟同步編程中用到的try/catch塊相似，Promise還提供了finally方法，會在Promise鏈結束后調用，無論是否出現錯誤，我們都可以在這里做函數清理的工作。畢竟要有首有尾嘛。
async/await
現在來看一下async/await，簡單來說就是基于Promise之上的語法糖，可以讓異步操作更加簡單明了。
具體步驟就是
首先使用async將返回值為Promise對象的函數標記為異步函數，就像是剛剛用到的fetch()就是一個異步函數，在異步函數中可以調用其他異步函數，不過不是使用then，而是用更簡單的await，中文意思就是等到，等待，所以await會等待Promise完成之后直接返回最終結果
用了async/await之后就是將函數變成異步函數，可以直接獲取到我們想要的結果，所以some已經是服務器返回的響應數據了,然后我們就可以進行響應的操作了
await雖然看上去會暫停函數的執行，但是在等待的過程中同樣可以處理其他任務，比如我這里將返回的數據轉換為json數據，因為await底層就是基于Promise和事件循環機制實現的，具體操作還有很多自行去嘗試。
這樣我們就拿到了我們想要的數據了。
但是使用的時候也要留意await的錯誤用法
比如我這樣
- async function fn() {
- const some1 = await fetch("http://jsonplaceholder.typicode.com/posts/1")
- const some2 = await fetch("http://jsonplaceholder.typicode.com/posts/2")
- const some3 = await fetch("http://jsonplaceholder.typicode.com/posts/3")
- ...
- }
- fn()
雖然看起來沒有什么錯誤啊，但是這樣寫會打破這兩個fetch()操作的并行，因為我們是等到第一個任務完成再執行第二個任務,然后再執行后面的代碼。
所以我們有個小妙招。
就是將所有Promise用Promise.all組合起來，然后再去await，比如我下面的做法
- async function fn() {
- const some1 = await fetch("http://jsonplaceholder.typicode.com/posts/1")
- const some2 = await fetch("http://jsonplaceholder.typicode.com/posts/1")
- const some3 = await fetch("http://jsonplaceholder.typicode.com/posts/1")
- const [a,b,c] = await Promise.all([some1,some2,some3])
- }
- fn()
這樣的做法會讓運行程序效率提升很多。
最后，我們不能在全局或者普通函數中直接使用await關鍵字，await只在異步中有效，如果我們想要在最外層中使用await那么需要先定義一個異步函數，然后再在函數體中使用它
使用async await可以寫更清晰更容易的理解異步代碼，而且不用再使用底層的Promise對象，包括then(),catch()函數等
如果舊版本瀏覽器不支持async await語法，可以通過轉譯器編譯成舊版本也兼容的代碼
