前言：

javascript語(yǔ)言的執(zhí)行環(huán)境是"單線程"。也就是指一次只能完成一件任務(wù)。如果有多個(gè)任務(wù)，就必須排隊(duì)，前面一個(gè)任務(wù)完成，在執(zhí)行后面一個(gè)任務(wù)

這種模式雖然實(shí)現(xiàn)起來(lái)比較簡(jiǎn)單，執(zhí)行環(huán)境相對(duì)單純，但是只要一個(gè)任務(wù)耗時(shí)很長(zhǎng)，后面的任務(wù)都必須排隊(duì)等著，會(huì)拖延整個(gè)程序的執(zhí)行。常見(jiàn)的瀏覽器無(wú)響應(yīng)（假死），往往是因?yàn)槟欢蝚avascript代碼長(zhǎng)時(shí)間運(yùn)行（比如死循環(huán)），導(dǎo)致整個(gè)頁(yè)面卡在這個(gè)地方，其他任務(wù)無(wú)法運(yùn)行。

為了解決這個(gè)問(wèn)題Javascript語(yǔ)言將任務(wù)的執(zhí)行模式分成兩種：同步和異步。我們?cè)谶@里主要來(lái)說(shuō)說(shuō) 異步編程

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

這是異步編程最基本的方法

假如有兩個(gè)函數(shù)f1和f2，后者等待前者的執(zhí)行結(jié)果。如果f1是一個(gè)很耗時(shí)的任務(wù)，可以考慮改寫(xiě)f1，把f2寫(xiě)成f1的回調(diào)函數(shù)。

function f1(callback) {
  setTimeout(function () {
     callback();
  },1000);
}
f1()f2;

采用這種方式，我們把同步操作變成了異步操作，f1不會(huì)堵塞程序的運(yùn)行，相當(dāng)于先執(zhí)行程序的主要邏輯，將耗時(shí)的操作推遲執(zhí)行。

回調(diào)函數(shù)：優(yōu)點(diǎn)是簡(jiǎn)單、容易理解和部署。

缺點(diǎn)是不利于代碼的閱讀和維護(hù)，各個(gè)部分之間高度耦合（Coupling），流程會(huì)很混亂，而且每個(gè)任務(wù)只能指定一個(gè)回調(diào)函數(shù)。

二、事件監(jiān)聽(tīng)

采用事件驅(qū)動(dòng)模式。任務(wù)的執(zhí)行不取決于代碼的順序，而取決與某個(gè)事件的發(fā)生。

以f1和f2為例。先為f1綁定事件

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

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

事件監(jiān)聽(tīng)：優(yōu)點(diǎn)是可以綁定多個(gè)事件，每個(gè)事件可以指定多個(gè)回調(diào)函數(shù)，而且可以“去耦合”（Decoupling），有利于實(shí)現(xiàn)模塊化。

缺點(diǎn)是整個(gè)程序都要變成事件驅(qū)動(dòng)型，運(yùn)動(dòng)流程會(huì)變得很不清晰。

三、發(fā)布/訂閱

發(fā)布/訂閱模式，又稱(chēng)觀察者模式

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

	//f2向信號(hào)中心Jquery訂閱done信號(hào)
	jQuery.subscribe("done", f2);
	function f1(){
　　　　setTimeout(function () {
　　　　　　// f1的任務(wù)代碼
		   //發(fā)布done信號(hào)
　　　　　　jQuery.publish("done");
　　　　}, 1000);
　　}
　　//f2執(zhí)行完成后，取消訂閱
　　jQuery.unsubscribe("done", f2);

發(fā)布/訂閱，性質(zhì)與“事件監(jiān)聽(tīng)類(lèi)似”，但是明顯優(yōu)于后者，因?yàn)槲覀兛梢酝ㄟ^(guò)查看”消息中心“，了解存在多少信號(hào)，多少個(gè)訂閱者，從而監(jiān)聽(tīng)程序的運(yùn)行。

四、Promises對(duì)象

Promises對(duì)象是CommonJs工作提出的一種規(guī)范，目的是為了異步編程提供統(tǒng)一接口

他的思想是每一個(gè)異步任務(wù)返回一個(gè)Promise對(duì)象，該對(duì)象有一個(gè)then方法，允許指定回調(diào)函數(shù)，比如f1的回調(diào)函數(shù)f2，可以寫(xiě)成：

	f1().then(f2);
　	function f1(){
　		//deferred對(duì)象就是jQuery的回調(diào)函數(shù)解決方案。
　　　　var dfd = $.Deferred();
　　　　setTimeout(function () {
　　　　　　// f1的任務(wù)代碼
		   //將dtd對(duì)象的執(zhí)行狀態(tài)從"未完成"改為"已完成"，從而觸發(fā)done()方法
　　　　　　dfd.resolve();
　　　　}, 500);
	   //返回promise對(duì)象 
	   // deferred.promise()方法。它的作用是，在原來(lái)的deferred對(duì)象上返回另一個(gè)deferred對(duì)象，
	   //后者只開(kāi)放與改變執(zhí)行狀態(tài)無(wú)關(guān)的方法（比如done()方法和fail()方法），
	   //屏蔽與改變執(zhí)行狀態(tài)有關(guān)的方法（比如resolve()方法和reject()方法），
	   //從而使得執(zhí)行狀態(tài)不能被改變。
　　　　return dfd.promise;
　　}
 
	f1().then(f2).then(f3); //指定多個(gè)回調(diào)函數(shù)
	f1().then(f2).fail(f3); //指定發(fā)生錯(cuò)誤時(shí)的回調(diào)函數(shù)

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

五、生成器函數(shù) Generator/yield

Generator函數(shù)是 ES6 提供的一種異步編程解決方案。

yield表達(dá)式可以暫停函數(shù)執(zhí)行，next方法用于恢復(fù)函數(shù)執(zhí)行，這使得Generator函數(shù)非常適合將異步任務(wù)同步化。
yield表達(dá)式本身沒(méi)有返回值，或者說(shuō)總是返回undefined。next方法可以帶一個(gè)參數(shù)，該參數(shù)就會(huì)被當(dāng)作上一個(gè)yield表達(dá)式的返回值。
每個(gè)yield返回的是｛value:yield返回的值，done:true/false(執(zhí)行狀態(tài))｝

	function *generatorDemo() {
	 yield 'hello';
	 yield 1 + 2;
	 return 'ok';
	}
	 
	var demo = generatorDemo()
	 
	demo.next()  // { value: 'hello', done: false } 
	demo.next()  // { value: 3, done: false } 
	demo.next()  // { value: 'ok', done: ture } 
	demo.next()  // { value: undefined, done: ture }
	  

Generator并不是為異步而設(shè)計(jì)出來(lái)的，它還有其他功能（對(duì)象迭代、控制輸出、部署Interator接口…）

六、async/await 函數(shù)的實(shí)現(xiàn)

async是“異步”的意思，而 await 是等待的意思。所以應(yīng)該很好理解 async 用于申明一個(gè) 異步的function （實(shí)際上是asnyc function 對(duì)象）

await 用于等待一個(gè)異步任務(wù)執(zhí)行完成的結(jié)果，并且await只等出現(xiàn)在 async 函數(shù)中

一個(gè)函數(shù)如果加上 asnyc，那么該函數(shù)就會(huì)返回一個(gè) Promise

async function async1() {
  return "1"
}
console.log(async1()) // -> Promise {<resolved>: "1"}

async函數(shù)返回的是一個(gè) Promise 對(duì)象，可以使用 then 方法添加回調(diào)函數(shù)，async 函數(shù)內(nèi)部 return 語(yǔ)句返回的值，會(huì)成為 then 方法回調(diào)函數(shù)的參數(shù)。當(dāng)函數(shù)執(zhí)行的時(shí)候，一旦遇到await就會(huì)先返回，等到異步操作完成，再接著執(zhí)行函數(shù)體內(nèi)后面的語(yǔ)句。

1.await命令后面返回的是 Promise 對(duì)象，運(yùn)行結(jié)果可能是rejected，所以最好把a(bǔ)wait命令放在try…catch代碼塊中。

	async function test(){
   		let newTime
   		 = await new Promise((resolve,reject)=>{//這里等待異步返回結(jié)果，再繼續(xù)向下執(zhí)行
       let time = 3000;     
       setTimeout(()=>{
          resolve(time);
       },time)
   	})
   console.log(newTime+'毫秒后執(zhí)行');
   let content = 'test';
   console.log(content);      //3s后，先輸出  “3000毫秒后執(zhí)行”，再輸出 "test"
	}
   test()

總結(jié)：

簡(jiǎn)簡(jiǎn)單單的六種方法：

js 異步編程的進(jìn)化史：callback -> promise  -> generator -> asnyc + await

到此這篇關(guān)于JS異步編程方法的6種方案總結(jié)的文章就介紹到這了,更多相關(guān)JS異步編程方法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論