javascript的異步操作方法是什么

這篇“javascript的異步操作方法是什么”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“javascript的異步操作方法是什么”文章吧。

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是一個(gè)耗時(shí)的工作，所以，把B放在任務(wù)隊(duì)列中，去執(zhí)行C，然后B的一些I/O等返回結(jié)果之后，再去執(zhí)行B，這就是異步操作。

JavaScript為什么需要異步操作？

　　JavaScript語(yǔ)言的執(zhí)行環(huán)境是“單線程”， 所謂單線程，就是一次只能完成一件任務(wù)， 如果有多個(gè)任務(wù)就需要排隊(duì)，一個(gè)完成了，繼續(xù)下一個(gè)，這種方式在實(shí)現(xiàn)來(lái)說(shuō)是非常簡(jiǎn)單的，但是如果一個(gè)任務(wù)耗時(shí)很長(zhǎng)，那么后面的任務(wù)就需要排隊(duì)等著，會(huì)拖延整個(gè)程序的執(zhí)行。 常見的瀏覽器無(wú)響應(yīng)（假死）就是因?yàn)槟骋欢蜫avaScript代碼長(zhǎng)時(shí)間運(yùn)行（比如死循環(huán)），導(dǎo)致整個(gè)頁(yè)面卡死，其他任務(wù)無(wú)法執(zhí)行。

　　為了解決這個(gè)問(wèn)題，JavaScript語(yǔ)言將任務(wù)的執(zhí)行模式分為兩種：同步（Synchronous）和異步（Asynchronous）。

　　同步任務(wù)執(zhí)行的順序和排隊(duì)的順序是一致的，而異步則需要有一個(gè)或者多個(gè)回調(diào)函數(shù)，前一個(gè)任務(wù)結(jié)束后，不是執(zhí)行后一個(gè)任務(wù)，而是執(zhí)行回調(diào)函數(shù)，后一個(gè)任務(wù)則是等著前一個(gè)任務(wù)結(jié)束就執(zhí)行，所以程序的執(zhí)行順序與任務(wù)的排列順序是不一致的，異步的。

　　異步模式非常重要，在瀏覽器端，耗時(shí)很長(zhǎng)的操作都應(yīng)該異步執(zhí)行，避免瀏覽器失去響應(yīng)，最好的例子就是ajax操作，在服務(wù)器端， 異步操作甚至是唯一方式，因?yàn)閳?zhí)行環(huán)境是單線程的，如果允許同步執(zhí)行所有的http請(qǐng)求，服務(wù)器性能會(huì)急劇下降，很快就會(huì)失去響應(yīng)。

JavaScript中異步操作的幾種類型。

　　JavaScript中異步編程的方法有：

• 回調(diào)函數(shù)

• 事件監(jiān)聽

• 發(fā)布/訂閱

• promise

• generator（ES6）

• async/await （ES7）

　　下面我來(lái)分別介紹這幾種異步方法：

一、回調(diào)函數(shù)

　     回調(diào)函數(shù)是異步編程中最基本的方法。假設(shè)有三個(gè)函數(shù)f1、f2、f3，f2需要等待f1的執(zhí)行結(jié)果，而f3是獨(dú)立的，不需要f1和f2的結(jié)果，如果我們寫成同步，就是這樣的：

　　f1();
　　f2();
　　f3();

　　如果f1執(zhí)行的很快，可以； 但是如果f1執(zhí)行的很慢，那么f2和f3就會(huì)被阻塞，無(wú)法執(zhí)行。這樣的效率是非常低的。但是我們可以改寫，將f2寫成是f1的回調(diào)函數(shù)，如下：

　　function f1(callback){
　　　　setTimeout(function () {
　　　　　　// f1的任務(wù)代碼
　　　　　　callback();
　　　　}, 1000);
　　}

　　 那么這時(shí)候執(zhí)行代碼就是這樣：

f1(f2);
f3();

　　這樣，就是一個(gè)異步的執(zhí)行了，即使f1很費(fèi)時(shí)間，但是由于是異步的，那么f3()就會(huì)很快的得到執(zhí)行，而不會(huì)受到f1和f2的影響。

　　注意： 如果我們把f1寫成這樣呢？

function f1(callback){
　　// f1的任務(wù)代碼
　　callback();
}

　　然后，我們同樣可以這么調(diào)用：

f1(f2);
f3()

　　這時(shí)候還是異步的嗎？ 答案：不是異步。 這里的回調(diào)函數(shù)并非真正的回調(diào)函數(shù)，如果沒(méi)有利用setTimeout含函數(shù)，那么f3()的執(zhí)行同樣需要等到f1(f2)完全執(zhí)行完畢，這里要注意。而我們就是利用setTImeout才能做出真正的回調(diào)函數(shù)。

二、事件監(jiān)聽

　　另一種異步的思路是采用事件驅(qū)動(dòng)模式。任務(wù)的執(zhí)行不取決于代碼的順序， 而取決于某個(gè)事件是否發(fā)生。 還是以f1、f2、f3為例子。 首先，為f1綁定一個(gè)事件（這里采用jquery的寫法）：

f1.on('done', f2);
f3()

　　這里的意思是： 當(dāng)f1發(fā)生了done事件，就執(zhí)行f2， 然后，我們對(duì)f1進(jìn)行改寫：

　　function f1(){
　　　　setTimeout(function () {
　　　　　　// f1的任務(wù)代碼　　　　　　
　　　　　　f1.trigger('done');
　　　　}, 1000);
　　}

　　f1.trigger('done')表示， 執(zhí)行完成后，立即觸發(fā)done事件，從而開始執(zhí)行f2。

　　這種方法的優(yōu)點(diǎn)就是比較容易理解，可以綁定多個(gè)事件，每個(gè)事件可以指定多個(gè)回調(diào)函數(shù)，而且可以去耦合，有利于實(shí)現(xiàn)模塊化，缺點(diǎn)就是整個(gè)程序都要變成事件驅(qū)動(dòng)型，運(yùn)行流程會(huì)變得很不清晰。

三、發(fā)布/訂閱

　　第二種方法的事件，實(shí)際上我們完全可以理解為“信號(hào)”，即f1完成之后，觸發(fā)了一個(gè) 'done'，信號(hào)，然后再開始執(zhí)行f2。

　　我們假定，存在一個(gè)“信號(hào)中心”，某個(gè)任務(wù)執(zhí)行完成，就向信號(hào)中心“發(fā)布”（publish）一個(gè)信號(hào)，其他任務(wù)可以向信號(hào)中心“訂閱”這個(gè)信號(hào)， 從而知道什么時(shí)候自己可以開始執(zhí)行。 這個(gè)就叫做“發(fā)布/訂閱模式”， 又稱為“觀察者”模式 。

　　這個(gè)模式有多種實(shí)現(xiàn)， 下面采用Ben Alman的Tiny PUb/Sub，這是jQuery的一個(gè)插件。

　　首先，f2向"信號(hào)中心"jquery訂閱"done"信號(hào)，

jQuery.subscribe("done", f2);

　　然后，f1進(jìn)行如下改寫：

　　function f1(){
　　　　setTimeout(function () {
　　　　　　// f1的任務(wù)代碼　　　　　　
　　　　　　jQuery.publish("done");
　　　　}, 1000);
　　}

　　jquery.pushlish("done")的意思是： f1執(zhí)行完成后，向“信號(hào)中心”jQuery發(fā)布“done”信號(hào)，從而引發(fā)f2的執(zhí)行。

　　此外，f2完成執(zhí)行后，也可以取消訂閱（unsubscribe）。

　jQuery.unsubscribe("done", f2);

　　這種方法的性質(zhì)和“事件監(jiān)聽”非常類似，但是明顯是優(yōu)于前者的，因?yàn)槲覀兛梢酝ㄟ^(guò)查看“消息中心”，了解到存在多少信號(hào)、每個(gè)信號(hào)有多少個(gè)訂閱者，從而監(jiān)控程序的運(yùn)行。

四、promise對(duì)象

　　promise是commonjs工作組提出來(lái)的一種規(guī)范，目的是為異步編程提供統(tǒng)一接口。

　　簡(jiǎn)答的說(shuō)，它的思想是每一個(gè)異步任務(wù)返回一個(gè)promise對(duì)象，該對(duì)象有一個(gè)then方法，允許指定回調(diào)函數(shù)。 比如,f1的回調(diào)函數(shù)f2，可以寫成：

f1().then(f2);

　　f1要進(jìn)行下面的改寫（這里使用jQuery的實(shí)現(xiàn)）：

　function f1(){
　　　　var dfd = $.Deferred();
　　　　setTimeout(function () {
　　　　　　// f1的任務(wù)代碼
　　　　　　dfd.resolve();
　　　　}, 500);
　　　　return dfd.promise;
　　}

　　這樣的優(yōu)點(diǎn)在于，回調(diào)函數(shù)編程了鏈?zhǔn)綄懛?，程序的流程可以看得很清楚，而且有一整套的配套方法，可以?shí)現(xiàn)很多強(qiáng)大的功能 。

　　如：指定多個(gè)回調(diào)函數(shù)：

　f1().then(f2).then(f3);

　　再比如，指定發(fā)生錯(cuò)誤時(shí)的回調(diào)函數(shù)：

f1().then(f2).fail(f3);

　　而且，他還有一個(gè)前面三種方法都沒(méi)有的好處：如果一個(gè)任務(wù)已經(jīng)完成，再添加回調(diào)函數(shù)，該回調(diào)函數(shù)會(huì)立即執(zhí)行?！∷?，你不用擔(dān)心是否錯(cuò)過(guò)了某個(gè)事件或者信號(hào)，這種方法的確定就是編寫和理解，都比較困難?！?/strong>

五、generator函數(shù)的異步應(yīng)用

　    　在ES6誕生之前，異步編程的方法，大致有下面四種：

• 回調(diào)函數(shù)

• 事件監(jiān)聽

• 發(fā)布/訂閱

• promise對(duì)象

　　 沒(méi)錯(cuò)，這就是上面講得幾種異步方法。 而generator函數(shù)將JavaScript異步編程帶入了一個(gè)全新的階段！

　　　比如，有一個(gè)任務(wù)是讀取文件進(jìn)行處理，任務(wù)的第一段是向操作系統(tǒng)發(fā)出請(qǐng)求，要求讀取文件。然后，程序執(zhí)行其他任務(wù)，等到操作系統(tǒng)返回文件，再接著執(zhí)行任務(wù)的第二段（處理文件）。這種不連續(xù)的執(zhí)行，就叫做異步。

　　   相應(yīng)地，連續(xù)的執(zhí)行就叫做同步。由于是連續(xù)執(zhí)行，不能插入其他任務(wù)，所以操作系統(tǒng)從硬盤讀取文件的這段時(shí)間，程序只能干等著。

協(xié)程

　　傳統(tǒng)的編程語(yǔ)言中，早就有了異步編程的解決方案，其中一種叫做協(xié)程，意思是多個(gè)線程互相協(xié)作，完成異步任務(wù)。

　　協(xié)程優(yōu)點(diǎn)像函數(shù)，又有點(diǎn)像線程，運(yùn)行流程如下：

• 第一步，協(xié)程A開始執(zhí)行。

• 第二步，協(xié)程A執(zhí)行到一半，進(jìn)入暫停，執(zhí)行權(quán)轉(zhuǎn)移到協(xié)程B。

• 第三步，（一段時(shí)間后）協(xié)程B交還執(zhí)行權(quán)。

• 第四步，協(xié)程A恢復(fù)執(zhí)行。

　　上面的協(xié)程A，就是異步任務(wù)，因?yàn)樗譃閮啥危ɑ蛘叨喽危﹫?zhí)行。

　　舉例來(lái)說(shuō)，讀取文件的協(xié)程寫法如下：

function *asyncJob() {
  // ...其他代碼
  var f = yield readFile(fileA);
  // ...其他代碼
}

　　上面代碼的函數(shù)asyncJob是一個(gè)協(xié)程，奧妙就在于yield命令， 它表示執(zhí)行到此處，執(zhí)行權(quán)交給其他協(xié)程，也就是說(shuō)yield命令是異步兩個(gè)階段的分界線。

　　協(xié)程遇到y(tǒng)ield命令就暫停，等到執(zhí)行權(quán)返回，再?gòu)臅和５牡胤嚼^續(xù)向后執(zhí)行，它的最大優(yōu)點(diǎn)就是代碼的寫法非常像同步操作，如果去除yield命令，簡(jiǎn)直是一模一樣。

協(xié)程的Generator函數(shù)實(shí)現(xiàn)

　　Generator函數(shù)是協(xié)程在ES6中的實(shí)現(xiàn)，最大特點(diǎn)就是可以交出函數(shù)的執(zhí)行權(quán)（即暫停執(zhí)行）。

　　整個(gè)Generator函數(shù)就是一個(gè)封裝的異步任務(wù)，或者說(shuō)異步任務(wù)的容器。 異步任務(wù)需要暫停的地方，都用yield語(yǔ)句注明。 如下：

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ù)時(shí) gen(1)， 會(huì)返回一個(gè)內(nèi)部指針（即遍歷器）g。 這是Generator函數(shù)不同于普通函數(shù)的另一個(gè)地方，即執(zhí)行它（調(diào)用函數(shù)）不會(huì)返回結(jié)果， 返回的一個(gè)指針對(duì)象 。調(diào)用指針g的next方法，會(huì)移動(dòng)內(nèi)部指針（即執(zhí)行異步任務(wù)的第一階段），指向第一個(gè)遇到的yield語(yǔ)句，這里我們是x + 2，但是實(shí)際上這里只是舉例，實(shí)際上 x + 2 這句應(yīng)該是一個(gè)異步操作，比如ajax請(qǐng)求。 換言之，next方法的作用是分階段執(zhí)行Generator函數(shù)。每次調(diào)用next方法，會(huì)返回一個(gè)對(duì)象，表示當(dāng)前階段的信息（value屬性和done屬性）。 value屬性是yield語(yǔ)句后面表達(dá)式的值，表示當(dāng)前階段的值；done屬性是一個(gè)布爾值，表示Generator函數(shù)是否執(zhí)行完畢，即是否還有下一個(gè)階段。

Generator函數(shù)的數(shù)據(jù)交換和錯(cuò)誤處理

　　Generator 函數(shù)可以暫停執(zhí)行和恢復(fù)執(zhí)行，這是它能封裝異步任務(wù)的根本原因。除此之外，它還有兩個(gè)特性，使它可以作為異步編程的完整解決方案：函數(shù)體內(nèi)外的數(shù)據(jù)交換和錯(cuò)誤處理機(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屬性，返回表達(dá)式x + 2的值3。第二個(gè)next方法帶有參數(shù)2，這個(gè)參數(shù)可以傳入 Generator 函數(shù)，作為上個(gè)階段異步任務(wù)的返回結(jié)果，被函數(shù)體內(nèi)的變量y接收。因此，這一步的value屬性，返回的就是2（變量y的值）。

Generator 函數(shù)內(nèi)部還可以部署錯(cuò)誤處理代碼，捕獲函數(shù)體外拋出的錯(cuò)誤。

function* gen(x){
  try {
    var y = yield x + 2;
  } catch (e){
    console.log(e);
  }
  return y;
}

var g = gen(1);
g.next();
g.throw('出錯(cuò)了');
// 出錯(cuò)了

上面代碼的最后一行，Generator 函數(shù)體外，使用指針對(duì)象的throw方法拋出的錯(cuò)誤，可以被函數(shù)體內(nèi)的try...catch代碼塊捕獲。這意味著，出錯(cuò)的代碼與處理錯(cuò)誤的代碼，實(shí)現(xiàn)了時(shí)間和空間上的分離，這對(duì)于異步編程無(wú)疑是很重要的。

異步任務(wù)的封裝

　　下面看看如何使用 Generator 函數(shù)，執(zhí)行一個(gè)真實(shí)的異步任務(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ù)封裝了一個(gè)異步操作，該操作先讀取一個(gè)遠(yuǎn)程接口，然后從 JSON 格式的數(shù)據(jù)解析信息。就像前面說(shuō)過(guò)的，這段代碼非常像同步操作，除了加上了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ù)，獲取遍歷器對(duì)象，然后使用next方法（第二行），執(zhí)行異步任務(wù)的第一階段。由于Fetch模塊返回的是一個(gè) Promise 對(duì)象，因此要用then方法調(diào)用下一個(gè)next方法。

　　可以看到，雖然 Generator 函數(shù)將異步操作表示得很簡(jiǎn)潔，但是流程管理卻不方便（即何時(shí)執(zhí)行第一階段、何時(shí)執(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());

　　最終，打印臺(tái)輸出

即開始調(diào)用gen()，并沒(méi)有真正的調(diào)用，而是返回了一個(gè)生成器對(duì)象，a.next()的時(shí)候，執(zhí)行第一個(gè)yield，并立刻暫停執(zhí)行，交出了控制權(quán)； 接著，我們就可以去a.next() 開始恢復(fù)執(zhí)行。。。 如此循環(huán)往復(fù)。　　

每當(dāng)調(diào)用生成器對(duì)象的next的方法時(shí)，就會(huì)運(yùn)行到下一個(gè)yield表達(dá)式。 之所以稱這里的gen（）為生成器函數(shù)，是因?yàn)閰^(qū)別如下：

• 普通函數(shù)使用function來(lái)聲明，而生成器函數(shù)使用 function * 來(lái)聲明。

• 普通函數(shù)使用return來(lái)返回值，而生成器函數(shù)使用yield來(lái)返回值。

• 普通函數(shù)式run to completion模式 ，即一直運(yùn)行到末尾； 而生成器函數(shù)式 run-pause-run 模式， 函數(shù)可以在執(zhí)行過(guò)程中暫停一次或者多次。并且暫停期間允許其他代碼執(zhí)行。

async/await

　　async函數(shù)基于Generator又做了幾點(diǎn)改進(jìn)：

• 內(nèi)置執(zhí)行器，將Generator函數(shù)和自動(dòng)執(zhí)行器進(jìn)一步包裝。

• 語(yǔ)義更清楚，async表示函數(shù)中有異步操作，await表示等待著緊跟在后邊的表達(dá)式的結(jié)果。

• 適用性更廣泛，await后面可以跟promise對(duì)象和原始類型的值(Generator中不支持)

　　很多人都認(rèn)為這是異步編程的終極解決方案，由此評(píng)價(jià)就可知道該方法有多優(yōu)秀了。它基于Promise使用async/await來(lái)優(yōu)化then鏈的調(diào)用,其實(shí)也是Generator函數(shù)的語(yǔ)法糖。 async 會(huì)將其后的函數(shù)（函數(shù)表達(dá)式或 Lambda）的返回值封裝成一個(gè) Promise 對(duì)象，而 await 會(huì)等待這個(gè) Promise 完成，并將其 resolve 的結(jié)果返回出來(lái)。

　　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的語(yǔ)法，但使用Babel插件可以很好的轉(zhuǎn)義。另外await只能用在async函數(shù)中，否則會(huì)報(bào)錯(cuò)。

以上就是關(guān)于“javascript的異步操作方法是什么”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。