1 前言

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

2 概念說明

2-1 瀏覽器的進(jìn)程和線程

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

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

JS引擎線程 JS引擎，負(fù)責(zé)解析和運(yùn)行JS腳本，一個(gè)頁(yè)面中永遠(yuǎn)都只有一個(gè)JS線程來負(fù)責(zé)運(yùn)行JS程序，這就是我們常說的JS單線程。

注意：JS引擎線程和GUI渲染線程永遠(yuǎn)都是互斥的，所以當(dāng)我們的JS腳本運(yùn)行時(shí)間過長(zhǎng)時(shí)，或者有同步請(qǐng)求一直沒返回時(shí)，頁(yè)面的渲染操作就會(huì)阻塞，就是我們常說的卡死了

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

定時(shí)觸發(fā)器線程 瀏覽器模型定時(shí)計(jì)數(shù)器并不是由JavaScript引擎計(jì)數(shù)的, 因?yàn)镴avaScript引擎是單線程的, 如果處于阻塞線程狀態(tài)就會(huì)影響記計(jì)時(shí)的準(zhǔn)確, 它必須依賴外部來計(jì)時(shí)并觸發(fā)定時(shí)。

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

2-2 JS單線程

因?yàn)橹挥蠮S引擎線程負(fù)責(zé)處理JS腳本程序，所以說JS是單線程的。可以理解的是js當(dāng)初設(shè)計(jì)成單線程語(yǔ)言的原因是因?yàn)閖s需要操作dom，如果多線程執(zhí)行的話會(huì)引入很多復(fù)雜的情況，比如一個(gè)線程刪除dom，一個(gè)線程添加dom，瀏覽器就沒法處理了。雖然現(xiàn)在js支持webworker多線線程了，但是新增的線程完全在主線程的控制下，為的是處理大量耗時(shí)計(jì)算用的，不能處理DOM,所以js本質(zhì)上來說還是單線程的。

2-3 同步異步

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

2-4 任務(wù)隊(duì)列

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

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

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

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

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

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

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

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

3 callback

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

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

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

時(shí)間延遲操作

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

nodeapi

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

ajax操作

$.ajax({type: "post",url: "xxx",success: function(data){//post請(qǐng)求成功回調(diào)方法//code},error: fucntion(e){//post請(qǐng)求錯(cuò)誤回調(diào)方法//code} }) 復(fù)制代碼

用回調(diào)函數(shù)的方法來進(jìn)行異步開發(fā)好處就是簡(jiǎn)單明了，容易理解

回調(diào)函數(shù)的缺點(diǎn), 用一個(gè)小的實(shí)例來說明一下:

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

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

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

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

4 Promise

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

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

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

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

rejected: 意味著操作失敗。

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

下面看看用Promise來實(shí)現(xiàn)多級(jí)回調(diào)能不能解決回調(diào)地獄的問題

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ù)制代碼

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

如何用Promise來實(shí)現(xiàn)同時(shí)發(fā)起多個(gè)異步操作的需求

• 多個(gè)請(qǐng)求都完成后在執(zhí)行操作

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

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

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

用Promise來寫異步可以避免回調(diào)地獄，也可以輕松的來實(shí)現(xiàn)callback需要引入控制代碼才能實(shí)現(xiàn)的多個(gè)異步請(qǐng)求動(dòng)作的需求。

當(dāng)然Promise也有自己的缺點(diǎn)：

promise一旦新建，就會(huì)立即執(zhí)行，無法取消

如果不設(shè)置回掉函數(shù)，promise內(nèi)部拋出的錯(cuò)誤就不會(huì)反應(yīng)到外部

處于pending狀態(tài)時(shí)，是不能知道目前進(jìn)展到哪個(gè)階段的 ( 剛開始？，即將結(jié)束？)

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

**關(guān)于Promise的詳細(xì)文章可以閱讀這篇你真的會(huì)用 Promise 嗎

5 Generator

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

Generator函數(shù)是一個(gè)狀態(tài)機(jī)，封裝了多個(gè)內(nèi)部狀態(tài)，也是一個(gè)遍歷器對(duì)象生成函數(shù)，生成的遍歷器對(duì)象可以一次遍歷內(nèi)部的每一個(gè)狀態(tài)。

Generator用function*來聲明，除了正常的return返回?cái)?shù)據(jù)之外，還可以用yeild來返回多次。

調(diào)用一個(gè)Generator對(duì)象生成一個(gè)generator對(duì)象，但是還并沒有去執(zhí)行他，執(zhí)行g(shù)enerator對(duì)象有兩種方法：

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

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

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

但僅僅是這樣來實(shí)現(xiàn)是不行的，因?yàn)楫惒胶瘮?shù)沒有返回值，必須通過重新包裝的方式來傳遞參數(shù)值。co.js就是一個(gè)這種generator的執(zhí)行庫(kù)。使用它是我們只需要將我們的 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 }) 復(fù)制代碼

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

6 async/await

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

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

還用用代碼來說明問題，用async/await方案來實(shí)現(xiàn)最初的需求

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

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

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

處理完有先后順序的請(qǐng)求處理，下面來個(gè)多個(gè)請(qǐng)求同時(shí)發(fā)起的例子

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

最佳實(shí)踐

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

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

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

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

轉(zhuǎn)載于:https://juejin.im/post/5cff4f3df265da1b86087dd7

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。