建站
咨詢
售后
建站咨詢
新聞中心
這篇“javascript的異步操作方法是什么”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“javascript的異步操作方法是什么”文章吧。
站在用戶的角度思考問題，與客戶深入溝通，找到白山網(wǎng)站設(shè)計與白山網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：成都網(wǎng)站制作、成都網(wǎng)站設(shè)計、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、域名注冊、網(wǎng)站空間、企業(yè)郵箱。業(yè)務(wù)覆蓋白山地區(qū)。
javascript的異步操作方法有：1、回調(diào)函數(shù)；2、事件監(jiān)聽；3、“發(fā)布/訂閱”模式；4、promise；5、generator；6、“async/await”。
本教程操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。
什么是異步操作？
異步模式并不難理解，比如任務(wù)A、B、C，執(zhí)行A之后執(zhí)行B，但是B是一個耗時的工作，所以，把B放在任務(wù)隊列中，去執(zhí)行C，然后B的一些I/O等返回結(jié)果之后，再去執(zhí)行B，這就是異步操作。
JavaScript為什么需要異步操作？
JavaScript語言的執(zhí)行環(huán)境是“單線程”， 所謂單線程，就是一次只能完成一件任務(wù)， 如果有多個任務(wù)就需要排隊，一個完成了，繼續(xù)下一個，這種方式在實現(xiàn)來說是非常簡單的，但是如果一個任務(wù)耗時很長，那么后面的任務(wù)就需要排隊等著，會拖延整個程序的執(zhí)行。常見的瀏覽器無響應(yīng)（假死）就是因為某一段JavaScript代碼長時間運行（比如死循環(huán)），導(dǎo)致整個頁面卡死，其他任務(wù)無法執(zhí)行。
為了解決這個問題，JavaScript語言將任務(wù)的執(zhí)行模式分為兩種：同步（Synchronous）和異步（Asynchronous）。
同步任務(wù)執(zhí)行的順序和排隊的順序是一致的，而異步則需要有一個或者多個回調(diào)函數(shù)，前一個任務(wù)結(jié)束后，不是執(zhí)行后一個任務(wù)，而是執(zhí)行回調(diào)函數(shù)，后一個任務(wù)則是等著前一個任務(wù)結(jié)束就執(zhí)行，所以程序的執(zhí)行順序與任務(wù)的排列順序是不一致的，異步的。
異步模式非常重要，在瀏覽器端，耗時很長的操作都應(yīng)該異步執(zhí)行，避免瀏覽器失去響應(yīng)，最好的例子就是ajax操作，在服務(wù)器端， 異步操作甚至是唯一方式，因為執(zhí)行環(huán)境是單線程的，如果允許同步執(zhí)行所有的http請求，服務(wù)器性能會急劇下降，很快就會失去響應(yīng)。
JavaScript中異步操作的幾種類型。
JavaScript中異步編程的方法有：
回調(diào)函數(shù)
事件監(jiān)聽
發(fā)布/訂閱
promise
generator（ES6）
async/await （ES7）
下面我來分別介紹這幾種異步方法：
一、回調(diào)函數(shù)
回調(diào)函數(shù)是異步編程中最基本的方法。假設(shè)有三個函數(shù)f1、f2、f3，f2需要等待f1的執(zhí)行結(jié)果，而f3是獨立的，不需要f1和f2的結(jié)果，如果我們寫成同步，就是這樣的：
f1(); f2(); f3();
如果f1執(zhí)行的很快，可以； 但是如果f1執(zhí)行的很慢，那么f2和f3就會被阻塞，無法執(zhí)行。這樣的效率是非常低的。但是我們可以改寫，將f2寫成是f1的回調(diào)函數(shù)，如下：
function f1(callback){
setTimeout(function () {
// f1的任務(wù)代碼
callback();
}, 1000);
}那么這時候執(zhí)行代碼就是這樣：
f1(f2); f3();
這樣，就是一個異步的執(zhí)行了，即使f1很費時間，但是由于是異步的，那么f3()就會很快的得到執(zhí)行，而不會受到f1和f2的影響。
注意： 如果我們把f1寫成這樣呢？
function f1(callback){
// f1的任務(wù)代碼
callback();
}然后，我們同樣可以這么調(diào)用：
f1(f2); f3()
這時候還是異步的嗎？答案：不是異步。這里的回調(diào)函數(shù)并非真正的回調(diào)函數(shù)，如果沒有利用setTimeout含函數(shù)，那么f3()的執(zhí)行同樣需要等到f1(f2)完全執(zhí)行完畢，這里要注意。而我們就是利用setTImeout才能做出真正的回調(diào)函數(shù)。
二、事件監(jiān)聽
另一種異步的思路是采用事件驅(qū)動模式。任務(wù)的執(zhí)行不取決于代碼的順序， 而取決于某個事件是否發(fā)生。 還是以f1、f2、f3為例子。 首先，為f1綁定一個事件（這里采用jquery的寫法）：
f1.on('done', f2);
f3()這里的意思是： 當(dāng)f1發(fā)生了done事件，就執(zhí)行f2， 然后，我們對f1進行改寫：
function f1(){
setTimeout(function () {
// f1的任務(wù)代碼
f1.trigger('done');
}, 1000);
}f1.trigger('done')表示， 執(zhí)行完成后，立即觸發(fā)done事件，從而開始執(zhí)行f2。
這種方法的優(yōu)點就是比較容易理解，可以綁定多個事件，每個事件可以指定多個回調(diào)函數(shù)，而且可以去耦合，有利于實現(xiàn)模塊化，缺點就是整個程序都要變成事件驅(qū)動型，運行流程會變得很不清晰。
三、發(fā)布/訂閱
第二種方法的事件，實際上我們完全可以理解為“信號”，即f1完成之后，觸發(fā)了一個 'done'，信號，然后再開始執(zhí)行f2。
我們假定，存在一個“信號中心”，某個任務(wù)執(zhí)行完成，就向信號中心“發(fā)布”（publish）一個信號，其他任務(wù)可以向信號中心“訂閱”這個信號， 從而知道什么時候自己可以開始執(zhí)行。 這個就叫做“發(fā)布/訂閱模式”， 又稱為“觀察者”模式 。
這個模式有多種實現(xiàn)， 下面采用Ben Alman的Tiny PUb/Sub，這是jQuery的一個插件。
首先，f2向"信號中心"jquery訂閱"done"信號，
jQuery.subscribe("done", f2);然后，f1進行如下改寫：
function f1(){
setTimeout(function () {
// f1的任務(wù)代碼
jQuery.publish("done");
}, 1000);
}jquery.pushlish("done")的意思是： f1執(zhí)行完成后，向“信號中心”jQuery發(fā)布“done”信號，從而引發(fā)f2的執(zhí)行。
此外，f2完成執(zhí)行后，也可以取消訂閱（unsubscribe）。
jQuery.unsubscribe("done", f2);這種方法的性質(zhì)和“事件監(jiān)聽”非常類似，但是明顯是優(yōu)于前者的，因為我們可以通過查看“消息中心”，了解到存在多少信號、每個信號有多少個訂閱者，從而監(jiān)控程序的運行。
四、promise對象
promise是commonjs工作組提出來的一種規(guī)范，目的是為異步編程提供統(tǒng)一接口。
簡答的說，它的思想是每一個異步任務(wù)返回一個promise對象，該對象有一個then方法，允許指定回調(diào)函數(shù)。 比如,f1的回調(diào)函數(shù)f2，可以寫成：
f1().then(f2);
f1要進行下面的改寫（這里使用jQuery的實現(xiàn)）：
function f1(){
var dfd = $.Deferred();
setTimeout(function () {
// f1的任務(wù)代碼
dfd.resolve();
}, 500);
return dfd.promise;
}這樣的優(yōu)點在于，回調(diào)函數(shù)編程了鏈式寫法，程序的流程可以看得很清楚，而且有一整套的配套方法，可以實現(xiàn)很多強大的功能 。
如：指定多個回調(diào)函數(shù)：
f1().then(f2).then(f3);
再比如，指定發(fā)生錯誤時的回調(diào)函數(shù)：
f1().then(f2).fail(f3);
而且，他還有一個前面三種方法都沒有的好處：如果一個任務(wù)已經(jīng)完成，再添加回調(diào)函數(shù)，該回調(diào)函數(shù)會立即執(zhí)行?！∷裕悴挥脫?dān)心是否錯過了某個事件或者信號，這種方法的確定就是編寫和理解，都比較困難?！?/strong>
五、generator函數(shù)的異步應(yīng)用
在ES6誕生之前，異步編程的方法，大致有下面四種：
回調(diào)函數(shù)
事件監(jiān)聽
發(fā)布/訂閱
promise對象
沒錯，這就是上面講得幾種異步方法。 而generator函數(shù)將JavaScript異步編程帶入了一個全新的階段！
比如，有一個任務(wù)是讀取文件進行處理，任務(wù)的第一段是向操作系統(tǒng)發(fā)出請求，要求讀取文件。然后，程序執(zhí)行其他任務(wù)，等到操作系統(tǒng)返回文件，再接著執(zhí)行任務(wù)的第二段（處理文件）。這種不連續(xù)的執(zhí)行，就叫做異步。
相應(yīng)地，連續(xù)的執(zhí)行就叫做同步。由于是連續(xù)執(zhí)行，不能插入其他任務(wù)，所以操作系統(tǒng)從硬盤讀取文件的這段時間，程序只能干等著。
協(xié)程
傳統(tǒng)的編程語言中，早就有了異步編程的解決方案，其中一種叫做協(xié)程，意思是多個線程互相協(xié)作，完成異步任務(wù)。
協(xié)程優(yōu)點像函數(shù)，又有點像線程，運行流程如下：
第一步，協(xié)程
A開始執(zhí)行。第二步，協(xié)程
A執(zhí)行到一半，進入暫停，執(zhí)行權(quán)轉(zhuǎn)移到協(xié)程B。第三步，（一段時間后）協(xié)程
B交還執(zhí)行權(quán)。第四步，協(xié)程
A恢復(fù)執(zhí)行。
上面的協(xié)程A，就是異步任務(wù)，因為它分為兩段（或者多段）執(zhí)行。
舉例來說，讀取文件的協(xié)程寫法如下：
function *asyncJob() {
// ...其他代碼
var f = yield readFile(fileA);
// ...其他代碼
}上面代碼的函數(shù)asyncJob是一個協(xié)程，奧妙就在于yield命令，它表示執(zhí)行到此處，執(zhí)行權(quán)交給其他協(xié)程，也就是說yield命令是異步兩個階段的分界線。
協(xié)程遇到y(tǒng)ield命令就暫停，等到執(zhí)行權(quán)返回，再從暫停的地方繼續(xù)向后執(zhí)行，它的最大優(yōu)點就是代碼的寫法非常像同步操作，如果去除yield命令，簡直是一模一樣。
協(xié)程的Generator函數(shù)實現(xiàn)
Generator函數(shù)是協(xié)程在ES6中的實現(xiàn)，最大特點就是可以交出函數(shù)的執(zhí)行權(quán)（即暫停執(zhí)行）。
整個Generator函數(shù)就是一個封裝的異步任務(wù)，或者說異步任務(wù)的容器。 異步任務(wù)需要暫停的地方，都用yield語句注明。 如下：
function* gen(x) {
var y = yield x + 2;
return y;
}
var g = gen(1);
g.next() // { value: 3, done: false }
g.next() // { value: undefined, done: true }在調(diào)用gen函數(shù)時 gen(1)， 會返回一個內(nèi)部指針（即遍歷器）g。這是Generator函數(shù)不同于普通函數(shù)的另一個地方，即執(zhí)行它（調(diào)用函數(shù)）不會返回結(jié)果， 返回的一個指針對象 。調(diào)用指針g的next方法，會移動內(nèi)部指針（即執(zhí)行異步任務(wù)的第一階段），指向第一個遇到的yield語句，這里我們是x + 2，但是實際上這里只是舉例，實際上 x + 2 這句應(yīng)該是一個異步操作，比如ajax請求。 換言之，next方法的作用是分階段執(zhí)行Generator函數(shù)。每次調(diào)用next方法，會返回一個對象，表示當(dāng)前階段的信息（value屬性和done屬性）。 value屬性是yield語句后面表達式的值，表示當(dāng)前階段的值；done屬性是一個布爾值，表示Generator函數(shù)是否執(zhí)行完畢，即是否還有下一個階段。
Generator函數(shù)的數(shù)據(jù)交換和錯誤處理
Generator 函數(shù)可以暫停執(zhí)行和恢復(fù)執(zhí)行，這是它能封裝異步任務(wù)的根本原因。除此之外，它還有兩個特性，使它可以作為異步編程的完整解決方案：函數(shù)體內(nèi)外的數(shù)據(jù)交換和錯誤處理機制。
next返回值的value屬性，是 Generator 函數(shù)向外輸出數(shù)據(jù)；next方法還可以接受參數(shù)，向 Generator 函數(shù)體內(nèi)輸入數(shù)據(jù)。
function* gen(x){
var y = yield x + 2;
return y;
}
var g = gen(1);
g.next() // { value: 3, done: false }
g.next(2) // { value: 2, done: true }上面代碼中，第一next方法的value屬性，返回表達式x + 2的值3。第二個next方法帶有參數(shù)2，這個參數(shù)可以傳入 Generator 函數(shù)，作為上個階段異步任務(wù)的返回結(jié)果，被函數(shù)體內(nèi)的變量y接收。因此，這一步的value屬性，返回的就是2（變量y的值）。
Generator 函數(shù)內(nèi)部還可以部署錯誤處理代碼，捕獲函數(shù)體外拋出的錯誤。
function* gen(x){
try {
var y = yield x + 2;
} catch (e){
console.log(e);
}
return y;
}
var g = gen(1);
g.next();
g.throw('出錯了');
// 出錯了上面代碼的最后一行，Generator 函數(shù)體外，使用指針對象的throw方法拋出的錯誤，可以被函數(shù)體內(nèi)的try...catch代碼塊捕獲。這意味著，出錯的代碼與處理錯誤的代碼，實現(xiàn)了時間和空間上的分離，這對于異步編程無疑是很重要的。
異步任務(wù)的封裝
下面看看如何使用 Generator 函數(shù)，執(zhí)行一個真實的異步任務(wù)。
var fetch = require('node-fetch');
function* gen(){
var url = 'https://api.github.com/users/github';
var result = yield fetch(url);
console.log(result.bio);
}上面代碼中，Generator 函數(shù)封裝了一個異步操作，該操作先讀取一個遠程接口，然后從 JSON 格式的數(shù)據(jù)解析信息。就像前面說過的，這段代碼非常像同步操作，除了加上了yield命令。
執(zhí)行這段代碼的方法如下。
var g = gen();
var result = g.next();
result.value.then(function(data){
return data.json();
}).then(function(data){
g.next(data);
});上面代碼中，首先執(zhí)行 Generator 函數(shù)，獲取遍歷器對象，然后使用next方法（第二行），執(zhí)行異步任務(wù)的第一階段。由于Fetch模塊返回的是一個 Promise 對象，因此要用then方法調(diào)用下一個next方法。
可以看到，雖然 Generator 函數(shù)將異步操作表示得很簡潔，但是流程管理卻不方便（即何時執(zhí)行第一階段、何時執(zhí)行第二階段）。
如下：
function* gen(x) {
yield 1;
yield 2;
yield 3;
return 4;
}
var a = gen();
console.log(a.next());
console.log(a.next());
console.log(a.next());
console.log(a.next());最終，打印臺輸出
即開始調(diào)用gen()，并沒有真正的調(diào)用，而是返回了一個生成器對象，a.next()的時候，執(zhí)行第一個yield，并立刻暫停執(zhí)行，交出了控制權(quán)； 接著，我們就可以去a.next() 開始恢復(fù)執(zhí)行。。。 如此循環(huán)往復(fù)。
每當(dāng)調(diào)用生成器對象的next的方法時，就會運行到下一個yield表達式。 之所以稱這里的gen（）為生成器函數(shù)，是因為區(qū)別如下：
普通函數(shù)使用function來聲明，而生成器函數(shù)使用 function * 來聲明。
普通函數(shù)使用return來返回值，而生成器函數(shù)使用yield來返回值。
普通函數(shù)式run to completion模式 ，即一直運行到末尾； 而生成器函數(shù)式 run-pause-run 模式， 函數(shù)可以在執(zhí)行過程中暫停一次或者多次。并且暫停期間允許其他代碼執(zhí)行。
async/await
async函數(shù)基于Generator又做了幾點改進：
內(nèi)置執(zhí)行器，將Generator函數(shù)和自動執(zhí)行器進一步包裝。
語義更清楚，async表示函數(shù)中有異步操作，await表示等待著緊跟在后邊的表達式的結(jié)果。
適用性更廣泛，await后面可以跟promise對象和原始類型的值(Generator中不支持)
很多人都認為這是異步編程的終極解決方案，由此評價就可知道該方法有多優(yōu)秀了。它基于Promise使用async/await來優(yōu)化then鏈的調(diào)用,其實也是Generator函數(shù)的語法糖。 async 會將其后的函數(shù)（函數(shù)表達式或 Lambda）的返回值封裝成一個 Promise 對象，而 await 會等待這個 Promise 完成，并將其 resolve 的結(jié)果返回出來。
await得到的就是返回值，其內(nèi)部已經(jīng)執(zhí)行promise中resolve方法，然后將結(jié)果返回。使用async/await的方式寫回調(diào)任務(wù)：
async function dolt(){
console.time('dolt');
const time1=300;
const time2=await step1(time1);
const time3=await step2(time2);
const result=await step3(time3);
console.log(`result is ${result}`);
console.timeEnd('dolt');
}
dolt();可以看到，在使用await關(guān)鍵字所在的函數(shù)一定要是async關(guān)鍵字修飾的。
功能還很新，屬于ES7的語法，但使用Babel插件可以很好的轉(zhuǎn)義。另外await只能用在async函數(shù)中，否則會報錯。
以上就是關(guān)于“javascript的異步操作方法是什么”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
網(wǎng)頁題目：javascript的異步操作方法是什么
分享路徑：http://www.dlmjj.cn/article/gidpsp.html
