1 前言

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

2 概念說明

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

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

GUI渲染線程 負責渲染瀏覽器頁面，解析html+css,構建DOM樹，進行頁面的布局和繪制操作，同事頁面需要重繪或者印發(fā)回流時，都是該線程負責執(zhí)行。

JS引擎線程 JS引擎，負責解析和運行JS腳本，一個頁面中永遠都只有一個JS線程來負責運行JS程序，這就是我們常說的JS單線程。

注意：JS引擎線程和GUI渲染線程永遠都是互斥的，所以當我們的JS腳本運行時間過長時，或者有同步請求一直沒返回時，頁面的渲染操作就會阻塞，就是我們常說的卡死了

事件觸發(fā)線程 接受瀏覽器里面的操作事件響應。如在監(jiān)聽到鼠標、鍵盤等事件的時候， 如果有事件句柄函數，就將對應的任務壓入隊列。

定時觸發(fā)器線程 瀏覽器模型定時計數器并不是由JavaScript引擎計數的, 因為JavaScript引擎是單線程的, 如果處于阻塞線程狀態(tài)就會影響記計時的準確, 它必須依賴外部來計時并觸發(fā)定時。

異步http請求線程 在XMLHttpRequest在連接后是通過瀏覽器新開一個線程請求將檢測到狀態(tài)變更時，如果設置有回調函數，異步線程就產生狀態(tài)變更事件，將這個回調再放入事件隊列中。再由JavaScript引擎執(zhí)行。

2-2 JS單線程

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

2-3 同步異步

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

2-4 任務隊列

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

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

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

2-5 事件循環(huán)機制

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

ES5的JS事件循環(huán)參考圖：

ES6的JS事件循環(huán)參考圖：

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

3 callback

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

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

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

時間延遲操作

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

nodeapi

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

ajax操作

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

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

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

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

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

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

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

4 Promise

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

Promise對象只有三種狀態(tài)：

pendding: 初始狀態(tài)，既不是成功，也不是失敗狀態(tài)。

fulfilled: 意味著操作成功完成。

rejected: 意味著操作失敗。

Promise的狀態(tài)只能由內部改變，并且只可以改變一次。

下面看看用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);}) 復制代碼

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

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

• 多個請求都完成后在執(zhí)行操作

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); }) 復制代碼

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

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一旦新建，就會立即執(zhí)行，無法取消

如果不設置回掉函數，promise內部拋出的錯誤就不會反應到外部

處于pending狀態(tài)時，是不能知道目前進展到哪個階段的 ( 剛開始？，即將結束？)

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

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

5 Generator

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

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

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

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

• next()方法，next方法回去執(zhí)行generator方法，遇到y(tǒng)eild會返回一個{value:xx, done: true/fasle}的對象，done為true說明generator執(zhí)行完畢
• 第二個方法是用for....of循環(huán)迭代generator對象

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

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的執(zhí)行庫。使用它是我們只需要將我們的 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執(zhí)行完成 }).catch(err => {//code }) 復制代碼

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

6 async/await

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

• 普通函數，即所有的原子型異步接口都返回Promise,Promise對象中可以進行任意異步操作,必須要有resolve();
• async函數，函數聲明前必須要有async關鍵字，函數中執(zhí)行定義的普通函數，并且每個執(zhí)行前都加上await關鍵字，標識該操作需要等待結果。
• 執(zhí)行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函數執(zhí)行完成后操作 }) .catch(err => {//異常抓取 }); 復制代碼

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

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

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

//普通函數 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方法同樣可以實現任意請求完成或異常后執(zhí)行操作的需求//async函數 async function asyncFun(){await Promise.race([loadData('url1'), loadData('url2')]).then(data => {console.log(data);}) } 復制代碼

最佳實踐

通過上面四種不同的異步實現方式的對比可以發(fā)現，async/await模式最接近于同步開發(fā)，即沒有連續(xù)回調，也沒有連續(xù)調用then函數的情況，也沒有引入第三方庫函數，所以就目前來說async/await+promise的方案為最佳實踐方案。

社區(qū)以及公眾號發(fā)布的文章，100%保證是我們的原創(chuàng)文章，如果有錯誤，歡迎大家指正。

文章首發(fā)在WebJ2EE公眾號上，歡迎大家關注一波，讓我們大家一起學前端~~~

再來一波號外，我們成立WebJ2EE公眾號前端吹水群，大家不管是看文章還是在工作中前端方面有任何問題，我們都可以在群內互相探討，希望能夠用我們的經驗幫更多的小伙伴解決工作和學習上的困惑,歡迎加入。

轉載于:https://juejin.im/post/5cff4f3df265da1b86087dd7

總結

以上是生活随笔為你收集整理的JS异步开发总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。