本文轉(zhuǎn)載自微信公眾號(hào)「零零后程序員小三」，作者003 。轉(zhuǎn)載本文請(qǐng)聯(lián)系零零后程序員小三公眾號(hào)。

什么是異步編程?

異步編程允許我們?cè)趫?zhí)行一個(gè)長(zhǎng)時(shí)間任務(wù)的時(shí)候，程序不用進(jìn)行等待就可以繼續(xù)執(zhí)行后面的代碼，直到任務(wù)完成后再以回調(diào)函數(shù)(callback)的方式回頭通知你

這種編程模式避免了程序的阻塞，提高了效率，它適用于那些網(wǎng)絡(luò)請(qǐng)求或者數(shù)據(jù)庫操作的應(yīng)用。

實(shí)現(xiàn)異步的方式

回調(diào)函數(shù)，是最簡(jiǎn)單的實(shí)現(xiàn)異步的方式

console.log('111'); 
 setTimeout(() => { 
     console.log("222"); 
        }, 2000) 
        console.log('333'); 

雖然，按照html文檔的輸出規(guī)則他是自上而下，但是在中間加了一個(gè)定時(shí)器，然后瀏覽器識(shí)別到了它，會(huì)馬上執(zhí)行，然后執(zhí)行后面的代碼，等到了給定時(shí)間，會(huì)以回調(diào)函數(shù)的方式返回。

在JS的設(shè)計(jì)之初，他一開始就是單線程的編程語言，盡管這里回調(diào)函數(shù)看上去和主線程一起進(jìn)行的，但是都運(yùn)行在一個(gè)線程中，況且主線程還運(yùn)行其他代碼。

雖然JS只有一個(gè)線程，但是還是有比較不錯(cuò)的優(yōu)點(diǎn)的。因?yàn)樗械牟僮鞫荚谝粋€(gè)線程之中，所以不用去考慮資源競(jìng)爭(zhēng)的問題，而且在源頭就避開了線程之間的頻繁切換，從而降低了線程開銷

但是它也有一個(gè)致命的缺點(diǎn)，如果我們需要進(jìn)行多個(gè)異步操作，我們可能會(huì)寫出下面的代碼

console.log("111"); 
 
       setTimeout(() => { 
           console.log("三秒后執(zhí)行1"); 
           setTimeout(() => { 
               console.log("三秒后執(zhí)行2"); 
               setTimeout(() => { 
                   console.log("三秒后執(zhí)行3"); 
                   setTimeout(() => { 
                       console.log("三秒后執(zhí)行4"); 
                   }, 3000) 
               }, 3000); 
           }, 3000); 
       }, 3000); 
 
       console.log("333"); 

如果再有別的回調(diào)，這樣會(huì)更恐怖，一直寫下去，換誰都看得心慌。我們管這個(gè)叫回調(diào)地獄

解決回調(diào)地獄

為了解決這個(gè)回調(diào)地獄，Promise誕生了。

我們?cè)陧撁嬷袆?dòng)態(tài)的更新數(shù)據(jù)，也就是AJAX技術(shù)，就是使用Promise的API fetch()實(shí)現(xiàn)的

我們可以試一試用fetch()獲取一個(gè)接口的數(shù)據(jù)

通過運(yùn)行可知道他返回的是一個(gè)Promise對(duì)象，但是我們還沒有獲得我們想要的數(shù)據(jù)，因?yàn)镻romise翻譯一下就是承諾的意思，所以，他應(yīng)該會(huì)在后來給我們實(shí)現(xiàn)我們想要的需求，所以，我在后面加個(gè)then，then翻譯一下就也是然后的意思

所以就是傳入它的then方法并傳入一個(gè)回調(diào)函數(shù)，如果在后來這個(gè)請(qǐng)求成功之后，然后回調(diào)函數(shù)會(huì)被調(diào)起，請(qǐng)求的函數(shù)會(huì)被作為一個(gè)參數(shù)傳入

fetch("http://jsonplaceholder.typicode.com/posts/1") 
.then((response)=> ...) 

但是如果這樣看來Promise和回調(diào)函數(shù)就沒有區(qū)別了。

但是，Promise的優(yōu)點(diǎn)在于它可以用一種鏈?zhǔn)浇Y(jié)構(gòu)將多個(gè)異步操作串聯(lián)起來

也就是 比如下面的response.json()方法也會(huì)返回一個(gè)Promise，然后then之后就是將未來返回的response轉(zhuǎn)換為json格式，

fetch("http://jsonplaceholder.typicode.com/posts/1") 
.then((response)=>response.json()) 

然后我們還可以繼續(xù)追加我們想要進(jìn)行的操作，直接then下去，比如下面這樣把結(jié)果打印出來或者把結(jié)果存到某個(gè)容器中等

fetch("http://jsonplaceholder.typicode.com/posts/1") 
.then((response)=>response.json()) 
.then((json) => console.log(json)) 

Promise的鏈?zhǔn)秸{(diào)用避免了代碼層層嵌套，盡管有很長(zhǎng)的鏈?zhǔn)秸{(diào)用，但也只是將代碼向下方增長(zhǎng)而不是向右?？勺x性會(huì)大大提高。

但是在使用異步操作的時(shí)候也會(huì)遇到錯(cuò)誤，比如各種網(wǎng)絡(luò)問題以及數(shù)據(jù)格式不正確等。然后我們可以通過在末尾添加一個(gè)catch()來捕獲這些錯(cuò)誤，如果之前任意一個(gè)階段發(fā)生了錯(cuò)誤，那么catch會(huì)被觸發(fā)，然后之后的then將不會(huì)再執(zhí)行

這跟同步編程中用到的try/catch塊相似，Promise還提供了finally方法，會(huì)在Promise鏈結(jié)束后調(diào)用，無論是否出現(xiàn)錯(cuò)誤，我們都可以在這里做函數(shù)清理的工作。畢竟要有首有尾嘛。

async/await

現(xiàn)在來看一下async/await，簡(jiǎn)單來說就是基于Promise之上的語法糖，可以讓異步操作更加簡(jiǎn)單明了。

具體步驟就是

首先使用async將返回值為Promise對(duì)象的函數(shù)標(biāo)記為異步函數(shù)，就像是剛剛用到的fetch()就是一個(gè)異步函數(shù)，在異步函數(shù)中可以調(diào)用其他異步函數(shù)，不過不是使用then，而是用更簡(jiǎn)單的await，中文意思就是等到，等待，所以await會(huì)等待Promise完成之后直接返回最終結(jié)果

用了async/await之后就是將函數(shù)變成異步函數(shù)，可以直接獲取到我們想要的結(jié)果，所以some已經(jīng)是服務(wù)器返回的響應(yīng)數(shù)據(jù)了,然后我們就可以進(jìn)行響應(yīng)的操作了

await雖然看上去會(huì)暫停函數(shù)的執(zhí)行，但是在等待的過程中同樣可以處理其他任務(wù)，比如我這里將返回的數(shù)據(jù)轉(zhuǎn)換為json數(shù)據(jù)，因?yàn)閍wait底層就是基于Promise和事件循環(huán)機(jī)制實(shí)現(xiàn)的，具體操作還有很多自行去嘗試。

這樣我們就拿到了我們想要的數(shù)據(jù)了。

但是使用的時(shí)候也要留意await的錯(cuò)誤用法

比如我這樣

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() 

雖然看起來沒有什么錯(cuò)誤啊，但是這樣寫會(huì)打破這兩個(gè)fetch()操作的并行，因?yàn)槲覀兪堑鹊降谝粋€(gè)任務(wù)完成再執(zhí)行第二個(gè)任務(wù),然后再執(zhí)行后面的代碼。

所以我們有個(gè)小妙招。

就是將所有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() 

這樣的做法會(huì)讓運(yùn)行程序效率提升很多。

最后，我們不能在全局或者普通函數(shù)中直接使用await關(guān)鍵字，await只在異步中有效，如果我們想要在最外層中使用await那么需要先定義一個(gè)異步函數(shù)，然后再在函數(shù)體中使用它

使用async await可以寫更清晰更容易的理解異步代碼，而且不用再使用底層的Promise對(duì)象，包括then(),catch()函數(shù)等

如果舊版本瀏覽器不支持async await語法，可以通過轉(zhuǎn)譯器編譯成舊版本也兼容的代碼