JS異步開發總結

1 前言

眾所周知，JS語言是單線程的。在實際開發過程中都會面臨一個問題，就是同步操作會阻塞整個頁面乃至整個瀏覽器的運行，只有在同步操作完成之后才能繼續進行其他處理，這種同步等待的用戶體驗極差。所以JS中引入了異步編程，主要特點就是不阻塞主線程的繼續執行，用戶直觀感受就是頁面不會卡住。

2 概念說明

2-1 瀏覽器的進程和線程

首先可以確定一點是瀏覽器是多進程的，比如打開多個窗口可能就對應著多個進程，這樣可以確保的是頁面之間相互沒有影響，一個頁面卡死也并不會影響其他的頁面。同樣對于瀏覽器進程來說，是多線程的，比如我們前端開發人員最需要了解的瀏覽器內核也就是瀏覽器的渲染進程，主要負責頁面渲染，腳本執行，事件處理等任務。為了更好的引入JS單線程的概念，我們將瀏覽器內核中常用的幾個線程簡單介紹一下：

GUI渲染線程負責渲染瀏覽器頁面，解析html+css,構建DOM樹，進行頁面的布局和繪制操作，同事頁面需要重繪或者印發回流時，都是該線程負責執行。
JS引擎線程 JS引擎，負責解析和運行JS腳本，一個頁面中永遠都只有一個JS線程來負責運行JS程序，這就是我們常說的JS單線程。

注意：JS引擎線程和GUI渲染線程永遠都是互斥的，所以當我們的JS腳本運行時間過長時，或者有同步請求一直沒返回時，頁面的渲染操作就會阻塞，就是我們常說的卡死了
事件觸發線程接受瀏覽器里面的操作事件響應。如在監聽到鼠標、鍵盤等事件的時候，如果有事件句柄函數，就將對應的任務壓入隊列。
定時觸發器線程瀏覽器模型定時計數器并不是由JavaScript引擎計數的, 因為JavaScript引擎是單線程的, 如果處于阻塞線程狀態就會影響記計時的準確, 它必須依賴外部來計時并觸發定時。
異步http請求線程在XMLHttpRequest在連接后是通過瀏覽器新開一個線程請求將檢測到狀態變更時，如果設置有回調函數，異步線程就產生狀態變更事件，將這個回調再放入事件隊列中。再由JavaScript引擎執行。

2-2 JS單線程

因為只有JS引擎線程負責處理JS腳本程序，所以說JS是單線程的。可以理解的是js當初設計成單線程語言的原因是因為js需要操作dom，如果多線程執行的話會引入很多復雜的情況，比如一個線程刪除dom，一個線程添加dom，瀏覽器就沒法處理了。雖然現在js支持webworker多線線程了，但是新增的線程完全在主線程的控制下，為的是處理大量耗時計算用的，不能處理DOM,所以js本質上來說還是單線程的。

2-3 同步異步

同步任務指的是，在主線程上排隊執行的任務，只有前一個任務執行完畢，才能執行后一個任務；異步任務指的是，不進入主線程、而進入"任務隊列"（task queue）的任務，只有"任務隊列"通知主線程，某個異步任務可以執行了，該任務才會進入主線程執行。

2-4 任務隊列

任務隊列就是用來存放一個個帶執行的異步操作的隊列，在ES6中又將任務隊列分為宏觀任務隊列和微觀任務隊列。

宏任務隊列（macrotask queue）等同于我們常說的任務隊列，macrotask是由宿主環境分發的異步任務，事件輪詢的時候總是一個一個任務隊列去查看執行的，"任務隊列"是一個先進先出的數據結構，排在前面的事件，優先被主線程讀取。

微任務隊列（microtask queue）是由js引擎分發的任務，總是添加到當前任務隊列末尾執行。另外在處理microtask期間，如果有新添加的microtasks，也會被添加到隊列的末尾并執行

2-5 事件循環機制

異步時間添加到任務隊列中后，如何控制他們的具體執行時間呢？JS引擎一旦執行棧中的所有同步任務執行完畢（此時JS引擎空閑），系統就會讀取任務隊列，將可運行的異步任務添加到可執行棧中，開始執行。

ES5的JS事件循環參考圖：

ES6的JS事件循環參考圖：

理解了JS程序執行的基本原理，下面就可以步入正題，討論一下我們在實際開發中，如何編寫異步程序才能讓自己的代碼易讀易懂bug少。

3 callback

在JavaScript中，回調函數具體的定義為：函數A作為參數(函數引用)傳遞到另一個函數B中，并且這個函數B執行函數A。我們就說函數A叫做回調函數。如果沒有名稱(函數表達式)，就叫做匿名回調函數。

因此callback 不一定用于異步，一般同步(阻塞)的場景下也經常用到回調，比如要求執行某些操作后執行回調函數。

回調函數被廣泛應用到JS的異步開發當中，下面分別列舉幾條開發中常用回調函數的情況，如：

時間延遲操作

setTimeout(function(){//該方法為回調方法//code
}, 1000)setInterval(()=>{//該方法為匿名回調方法//code
}, 1000)
復制代碼

nodeapi

//node讀取文件
fs.readFile(xxx, 'utf-8', function(err, data) { //該方法為讀取文件成功后出發的回調方法//code
});
復制代碼

ajax操作

$.ajax({type: "post",url: "xxx",success: function(data){//post請求成功回調方法//code},error: fucntion(e){//post請求錯誤回調方法//code}
})
復制代碼

用回調函數的方法來進行異步開發好處就是簡單明了，容易理解

回調函數的缺點, 用一個小的實例來說明一下:

method1(function(err, data) {//code1method2(function(err, data) { //code2method3(function(err, data) { //code3method4(D, 'utf-8', function(err, data) { //code4 });});});});
復制代碼

如果說異步方法之前有明確的先后順序來執行，稍微復雜的操作很容易寫出上面示例的代碼結構，如果加上業務代碼，程序就顯得異常復雜，代碼難以理解和調試，這種就是我們常說的回調地獄。

如果想要實現更加復雜的功能，回調函數的局限性也會凸顯出來，比如同時執行兩個異步請求，當兩個操作都結束時在執行某個操作，或者同時進行兩個請求，取優先完成的結果來執行操作，這種都需要在各自的回調方法中監控狀態來完成。

隨著ES6/ES7新標準的普及，我們應該尋求新的異步解決方案來替代這種傳統的回調方式。

4 Promise

ES6新增Promise對象的支持，Promise提供統一的接口來獲取異步操作的狀態信息，添加不能的處理方法。

Promise對象只有三種狀態：

pendding: 初始狀態，既不是成功，也不是失敗狀態。
fulfilled: 意味著操作成功完成。
rejected: 意味著操作失敗。

Promise的狀態只能由內部改變，并且只可以改變一次。

下面看看用Promise來實現多級回調能不能解決回調地獄的問題

 function read(filename){return new Promise((resolve, reject) => {//異步操作code, Example：fs.readFile(filename, 'utf8', (err, data) => { if(err) reject(err);resolve(data);});})}read(filename1).then(data=>{return read(filename2)}).then(data => {return read(filename3)}).then(data => {return read(filename4)}).catch(error=>{console.log(error);})
復制代碼

通過實踐代碼我們發現用Promise可以像寫同步代碼一樣實現異步功能，避免了層層嵌套的問題。

如何用Promise來實現同時發起多個異步操作的需求

多個請求都完成后在執行操作

function loadData(url){return new Promise((resolve, reject)=>{$.ajax({type: "post",url: url,success: function(data){//post請求成功回調方法resolve(data)},error: fucntion(e){//post請求錯誤回調方法reject(e)}})})
}Promise.all([loadData(url1), loadData(url2), loadData(url3)])
.then(data => {console.log(data)
}).catch(error => {console.log(error);
})
復制代碼

多個請求有一個完成后(成功或拒絕)就執行操作

function loadData(url){return new Promise((resolve, reject)=>{$.ajax({type: "post",url: url,success: function(data){//post請求成功回調方法resolve(data)},error: fucntion(e){//post請求錯誤回調方法reject(e)}})})
}Promise.race([loadData(url1), loadData(url2), loadData(url3)])
.then(data => {console.log(data)
}).catch(error => {console.log(error);
})
復制代碼

用Promise來寫異步可以避免回調地獄，也可以輕松的來實現callback需要引入控制代碼才能實現的多個異步請求動作的需求。

當然Promise也有自己的缺點：

promise一旦新建，就會立即執行，無法取消
如果不設置回掉函數，promise內部拋出的錯誤就不會反應到外部
處于pending狀態時，是不能知道目前進展到哪個階段的 ( 剛開始？，即將結束？)

帶著這些缺點，繼續往下學習別的異步編程方案。

**關于Promise的詳細文章可以閱讀這篇你真的會用 Promise 嗎

5 Generator

ES6新增Generator異步解決方案，語法行為與傳統方法完全不一樣。

Generator函數是一個狀態機，封裝了多個內部狀態，也是一個遍歷器對象生成函數，生成的遍歷器對象可以一次遍歷內部的每一個狀態。

Generator用function*來聲明，除了正常的return返回數據之外，還可以用yeild來返回多次。

調用一個Generator對象生成一個generator對象，但是還并沒有去執行他，執行generator對象有兩種方法：

next()方法，next方法回去執行generator方法，遇到yeild會返回一個{value:xx, done: true/fasle}的對象，done為true說明generator執行完畢
第二個方法是用for....of循環迭代generator對象

Generator的用處很多，本文只討論利用它暫停函數執行，返回任意表達式的值的這個特性來使異步代碼同步化表達。從死路上來講我們想達到這樣的效果：

function loadData(url, data){//異步請求獲取數據return new Promise((resolve, reject)=>{$.ajax({type: "post",url: url,success: function(data){//post請求成功回調方法resolve(data)},error: fucntion(e){//post請求錯誤回調方法reject(e)}})})
}
function*  gen() {yeild loadData(url1, data1);yeild loadData(url2, data2);yeild loadData(url3, data3);
}for(let data of gen()){//分別輸出每次加載數據的返回值console.log(data)
}
復制代碼

但僅僅是這樣來實現是不行的，因為異步函數沒有返回值，必須通過重新包裝的方式來傳遞參數值。co.js就是一個這種generator的執行庫。使用它是我們只需要將我們的 gen 傳遞給它像這樣?co(gen)?是的就這樣。

function*  gen() {let data1 = yeild loadData(url1, data1);console.log(data1);let data2 = yeild loadData(url2, data2);console.log(data2);let data3 = yeild loadData(url3, data3);console.log(data3);
}
co(gen())
.then(data => {//gen執行完成
}).catch(err => {//code
})
復制代碼

因為ES7中新增了對async/await的支持，所以異步開發有了更好的選擇，基本上可以放棄用原生generator來寫異步開發，所以我們只是有個簡單的概念，下面我們著重介紹一下異步編程的最終方案 async/await。

6 async/await

asycn/await方案可以說是目前解決JS異步編程的最終方案了，async/await是generator/co的語法糖，同時也需要結合Promise來使用。該方案的主要特點如下：

普通函數，即所有的原子型異步接口都返回Promise,Promise對象中可以進行任意異步操作,必須要有resolve();
async函數，函數聲明前必須要有async關鍵字，函數中執行定義的普通函數，并且每個執行前都加上await關鍵字，標識該操作需要等待結果。
執行async函數。asynch函數的返回值是Promise對象，可以用Promise對象的then方法來指定下一步操作。

還用用代碼來說明問題，用async/await方案來實現最初的需求

//普通函數
function loadData(url){//異步請求獲取數據return new Promise((resolve, reject)=>{$.ajax({type: "post",url: url,success: function(data){//post請求成功回調方法resolve(data)},error: fucntion(e){//post請求錯誤回調方法reject(e)}})})
}//async函數
async function asyncFun(){//普通函數的調用let data1 = await loadData(url1);let data2 = await loadData(url2);let data3 = await loadData(url3)
}asyncFun()
.then(data => {//async函數執行完成后操作
})
.catch(err => {//異常抓取
});
復制代碼

loadData()函數雖然返回的是Promise,但是await返回的是普通函數resole(data)時傳遞的data值。

通過和generator方式來的實現對比來看，更加理解了async/await是generator/co方法的語法糖，從函數結構上來說完全一樣。但是省略了一些外庫的引入，一些通用方法的封裝，使異步開發的邏輯更加清晰，更加接近同步開發。

處理完有先后順序的請求處理，下面來個多個請求同時發起的例子

//普通函數
function loadData(url){//異步請求獲取數據return new Promise((resolve, reject)=>{$.ajax({type: "post",url: url,success: function(data){//post請求成功回調方法resolve(data)},error: fucntion(e){//post請求錯誤回調方法reject(e)}})})
}//async函數
async function asyncFun(){await Promise.all([loadData('url1'), loadData('url2')]).then(data => {console.log(data); //['data1', 'data2']})
}asyncFun();//配合Promise的race方法同樣可以實現任意請求完成或異常后執行操作的需求//async函數
async function asyncFun(){await Promise.race([loadData('url1'), loadData('url2')]).then(data => {console.log(data);})
}
復制代碼