本文轉載自微信公眾號「零零后程序員小三」，作者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語法，可以通過轉譯器編譯成舊版本也兼容的代碼