?
This document uses PHP Chinese website manual Release
JavaScript的異步執(zhí)行
概述
回調(diào)函數(shù)
事件監(jiān)聽
發(fā)布/訂閱
異步操作的流程控制
串行執(zhí)行
并行執(zhí)行
并行與串行的結(jié)合
Promise對象
簡介
Promise接口
用法辨析
Promises對象的實(shí)現(xiàn)
實(shí)例:Ajax操作
小結(jié)
參考鏈接
Promise是JavaScript異步操作解決方案。介紹Promise之前,先對異步操作做一個(gè)詳細(xì)介紹。
Javascript語言的執(zhí)行環(huán)境是"單線程"(single thread)。所謂"單線程",就是指一次只能完成一件任務(wù)。如果有多個(gè)任務(wù),就必須排隊(duì),前面一個(gè)任務(wù)完成,再執(zhí)行后面一個(gè)任務(wù)。
這種模式的好處是實(shí)現(xiàn)起來比較簡單,執(zhí)行環(huán)境相對單純;壞處是只要有一個(gè)任務(wù)耗時(shí)很長,后面的任務(wù)都必須排隊(duì)等著,會拖延整個(gè)程序的執(zhí)行。常見的瀏覽器無響應(yīng)(假死),往往就是因?yàn)槟骋欢蜫avascript代碼長時(shí)間運(yùn)行(比如死循環(huán)),導(dǎo)致整個(gè)頁面卡在這個(gè)地方,其他任務(wù)無法執(zhí)行。
JavaScript語言本身并不慢,慢的是讀寫外部數(shù)據(jù),比如等待Ajax請求返回結(jié)果。這個(gè)時(shí)候,如果對方服務(wù)器遲遲沒有響應(yīng),或者網(wǎng)絡(luò)不通暢,就會導(dǎo)致腳本的長時(shí)間停滯。
為了解決這個(gè)問題,Javascript語言將任務(wù)的執(zhí)行模式分成兩種:同步(Synchronous)和異步(Asynchronous)。"同步模式"就是傳統(tǒng)做法,后一個(gè)任務(wù)等待前一個(gè)任務(wù)結(jié)束,然后再執(zhí)行,程序的執(zhí)行順序與任務(wù)的排列順序是一致的、同步的。這往往用于一些簡單的、快速的、不涉及讀寫的操作。
"異步模式"則完全不同,每一個(gè)任務(wù)分成兩段,第一段代碼包含對外部數(shù)據(jù)的請求,第二段代碼被寫成一個(gè)回調(diào)函數(shù),包含了對外部數(shù)據(jù)的處理。第一段代碼執(zhí)行完,不是立刻執(zhí)行第二段代碼,而是將程序的執(zhí)行權(quán)交給第二個(gè)任務(wù)。等到外部數(shù)據(jù)返回了,再由系統(tǒng)通知執(zhí)行第二段代碼。所以,程序的執(zhí)行順序與任務(wù)的排列順序是不一致的、異步的。
以下總結(jié)了"異步模式"編程的幾種方法,理解它們可以讓你寫出結(jié)構(gòu)更合理、性能更出色、維護(hù)更方便的JavaScript程序。
回調(diào)函數(shù)是異步編程最基本的方法。
假定有兩個(gè)函數(shù)f1和f2,后者等待前者的執(zhí)行結(jié)果。
f1(); f2();
如果f1是一個(gè)很耗時(shí)的任務(wù),可以考慮改寫f1,把f2寫成f1的回調(diào)函數(shù)。
function f1(callback){ setTimeout(function () { // f1的任務(wù)代碼 callback(); }, 1000); }
執(zhí)行代碼就變成下面這樣:
f1(f2);
采用這種方式,我們把同步操作變成了異步操作,f1不會堵塞程序運(yùn)行,相當(dāng)于先執(zhí)行程序的主要邏輯,將耗時(shí)的操作推遲執(zhí)行。
回調(diào)函數(shù)的優(yōu)點(diǎn)是簡單、容易理解和部署,缺點(diǎn)是不利于代碼的閱讀和維護(hù),各個(gè)部分之間高度耦合(Coupling),使得程序結(jié)構(gòu)混亂、流程難以追蹤(尤其是回調(diào)函數(shù)嵌套的情況),而且每個(gè)任務(wù)只能指定一個(gè)回調(diào)函數(shù)。
另一種思路是采用事件驅(qū)動(dòng)模式。任務(wù)的執(zhí)行不取決于代碼的順序,而取決于某個(gè)事件是否發(fā)生。
還是以f1和f2為例。首先,為f1綁定一個(gè)事件(這里采用的jQuery的寫法)。
f1.on('done', f2);
上面這行代碼的意思是,當(dāng)f1發(fā)生done事件,就執(zhí)行f2。然后,對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ù),而且可以"去耦合"(Decoupling),有利于實(shí)現(xiàn)模塊化。缺點(diǎn)是整個(gè)程序都要變成事件驅(qū)動(dòng)型,運(yùn)行流程會變得很不清晰。
"事件"完全可以理解成"信號",如果存在一個(gè)"信號中心",某個(gè)任務(wù)執(zhí)行完成,就向信號中心"發(fā)布"(publish)一個(gè)信號,其他任務(wù)可以向信號中心"訂閱"(subscribe)這個(gè)信號,從而知道什么時(shí)候自己可以開始執(zhí)行。這就叫做"發(fā)布/訂閱模式"(publish-subscribe pattern),又稱"觀察者模式"(observer pattern)。
這個(gè)模式有多種實(shí)現(xiàn),下面采用的是Ben Alman的Tiny Pub/Sub,這是jQuery的一個(gè)插件。
首先,f2向"信號中心"jQuery訂閱"done"信號。
jQuery.subscribe("done", f2);
然后,f1進(jìn)行如下改寫:
function f1(){ setTimeout(function () { // f1的任務(wù)代碼 jQuery.publish("done"); }, 1000); }
jQuery.publish("done")的意思是,f1執(zhí)行完成后,向"信號中心"jQuery發(fā)布"done"信號,從而引發(fā)f2的執(zhí)行。
f2完成執(zhí)行后,也可以取消訂閱(unsubscribe)。
jQuery.unsubscribe("done", f2);
這種方法的性質(zhì)與"事件監(jiān)聽"類似,但是明顯優(yōu)于后者。因?yàn)槲覀兛梢酝ㄟ^查看"消息中心",了解存在多少信號、每個(gè)信號有多少訂閱者,從而監(jiān)控程序的運(yùn)行。
如果有多個(gè)異步操作,就存在一個(gè)流程控制的問題:確定操作執(zhí)行的順序,以后如何保證遵守這種順序。
function async(arg, callback) { console.log('參數(shù)為 ' + arg +' , 1秒后返回結(jié)果'); setTimeout(function() { callback(arg * 2); }, 1000); }
上面代碼的async函數(shù)是一個(gè)異步任務(wù),非常耗時(shí),每次執(zhí)行需要1秒才能完成,然后再調(diào)用回調(diào)函數(shù)。
如果有6個(gè)這樣的異步任務(wù),需要全部完成后,才能執(zhí)行下一步的final函數(shù)。
function final(value) { console.log('完成: ', value); }
請問應(yīng)該如何安排操作流程?
async(1, function(value){ async(value, function(value){ async(value, function(value){ async(value, function(value){ async(value, function(value){ async(value, final); }); }); }); }); });
上面代碼采用6個(gè)回調(diào)函數(shù)的嵌套,不僅寫起來麻煩,容易出錯(cuò),而且難以維護(hù)。
我們可以編寫一個(gè)流程控制函數(shù),讓它來控制異步任務(wù),一個(gè)任務(wù)完成以后,再執(zhí)行另一個(gè)。這就叫串行執(zhí)行。
var items = [ 1, 2, 3, 4, 5, 6 ]; var results = []; function series(item) { if(item) { async( item, function(result) { results.push(result); return series(items.shift()); }); } else { return final(results); } } series(items.shift());
上面代碼中,函數(shù)series就是串行函數(shù),它會依次執(zhí)行異步任務(wù),所有任務(wù)都完成后,才會執(zhí)行final函數(shù)。items數(shù)組保存每一個(gè)異步任務(wù)的參數(shù),results數(shù)組保存每一個(gè)異步任務(wù)的運(yùn)行結(jié)果。
流程控制函數(shù)也可以是并行執(zhí)行,即所有異步任務(wù)同時(shí)執(zhí)行,等到全部完成以后,才執(zhí)行final函數(shù)。
var items = [ 1, 2, 3, 4, 5, 6 ]; var results = []; items.forEach(function(item) { async(item, function(result){ results.push(result); if(results.length == items.length) { final(results); } }) });
上面代碼中,forEach方法會同時(shí)發(fā)起6個(gè)異步任務(wù),等到它們?nèi)客瓿梢院?,才會?zhí)行final函數(shù)。
并行執(zhí)行的好處是效率較高,比起串行執(zhí)行一次只能執(zhí)行一個(gè)任務(wù),較為節(jié)約時(shí)間。但是問題在于如果并行的任務(wù)較多,很容易耗盡系統(tǒng)資源,拖慢運(yùn)行速度。因此有了第三種流程控制方式。
所謂并行與串行的結(jié)合,就是設(shè)置一個(gè)門檻,每次最多只能并行執(zhí)行n個(gè)異步任務(wù)。這樣就避免了過分占用系統(tǒng)資源。
var items = [ 1, 2, 3, 4, 5, 6 ]; var results = []; var running = 0; var limit = 2; function launcher() { while(running < limit && items.length > 0) { var item = items.shift(); async(item, function(result) { results.push(result); running--; if(items.length > 0) { launcher(); } else if(running == 0) { final(); } }); running++; } } launcher();
上面代碼中,最多只能同時(shí)運(yùn)行兩個(gè)異步任務(wù)。變量running記錄當(dāng)前正在運(yùn)行的任務(wù)數(shù),只要低于門檻值,就再啟動(dòng)一個(gè)新的任務(wù),如果等于0,就表示所有任務(wù)都執(zhí)行完了,這時(shí)就執(zhí)行final函數(shù)。
Promises對象是CommonJS工作組提出的一種規(guī)范,目的是為異步操作提供統(tǒng)一接口。
那么,什么是Promises?首先,它是一個(gè)對象,也就是說與其他JavaScript對象的用法,沒有什么兩樣;其次,它起到代理作用(proxy),使得異步操作具備同步操作(synchronous code)的接口,即充當(dāng)異步操作與回調(diào)函數(shù)之間的中介,使得程序具備正常的同步運(yùn)行的流程,回調(diào)函數(shù)不必再一層層包裹起來。
簡單說,它的思想是,每一個(gè)異步任務(wù)立刻返回一個(gè)Promise對象,由于是立刻返回,所以可以采用同步操作的流程。這個(gè)Promises對象有一個(gè)then方法,允許指定回調(diào)函數(shù),在異步任務(wù)完成后調(diào)用。比如,f1的回調(diào)函數(shù)f2,可以寫成:
(new Promise(f1)).then(f2);
這種寫法對于嵌套的回調(diào)函數(shù)尤其有用。
// 傳統(tǒng)寫法 step1(function (value1) { step2(value1, function(value2) { step3(value2, function(value3) { step4(value3, function(value4) { // ... }); }); }); }); // Promises的寫法 (new Promise(step1)) .then(step2) .then(step3) .then(step4);
從上面代碼可以看到,采用Promises接口以后,程序流程變得非常清楚,十分易讀。
總的來說,傳統(tǒng)的回調(diào)函數(shù)寫法使得代碼混成一團(tuán),變得橫向發(fā)展而不是向下發(fā)展。Promises規(guī)范就是為了解決這個(gè)問題而提出的,目標(biāo)是使用正常的程序流程(同步),來處理異步操作。它先返回一個(gè)Promise對象,后面的操作以同步的方式,寄存在這個(gè)對象上面。等到異步操作有了結(jié)果,再執(zhí)行前期寄放在它上面的其他操作。
Promises原本只是社區(qū)提出的一個(gè)構(gòu)想,一些外部函數(shù)庫率先實(shí)現(xiàn)了這個(gè)功能。ECMAScript 6將其寫入語言標(biāo)準(zhǔn),Chrome和Firefox瀏覽器都已經(jīng)部署了這個(gè)功能。
當(dāng)異步任務(wù)返回一個(gè)promise對象(小寫表示這是Promise的實(shí)例)時(shí),該對象只有三種狀態(tài):未完成(pending)、已完成(fulfilled)、失敗(rejected)。
這三種的狀態(tài)的變化途徑只有兩個(gè),且只能發(fā)生一次:從“未完成”到“已完成”,或者從“未完成”到“失敗”。一旦當(dāng)前狀態(tài)變?yōu)椤耙淹瓿伞被颉笆 ?,就意味著不會再發(fā)生狀態(tài)變化了。
Promise對象的運(yùn)行結(jié)果,最終只有兩種。
得到一個(gè)值,狀態(tài)變?yōu)閒ulfilled
拋出一個(gè)錯(cuò)誤,狀態(tài)變?yōu)閞ejected
promise對象的then方法用來添加回調(diào)函數(shù)。它可以接受兩個(gè)回調(diào)函數(shù),第一個(gè)是操作成功(fulfilled)時(shí)的回調(diào)函數(shù),第二個(gè)是操作失?。╮ejected)時(shí)的回調(diào)函數(shù)(可以不提供)。一旦狀態(tài)改變,就調(diào)用相應(yīng)的回調(diào)函數(shù)。
(new Promise(step1)) .then(step2) .then(step3) .then(step4) .then(console.log, console.error);
再來看上面的代碼就很清楚,step1是一個(gè)耗時(shí)很長的異步任務(wù),然后使用then方法,依次綁定了三個(gè)step1操作成功后的回調(diào)函數(shù)step2、step3、step4,最后再用then方法綁定兩個(gè)回調(diào)函數(shù):操作成功時(shí)的回調(diào)函數(shù)console.log,操作失敗時(shí)的回調(diào)函數(shù)console.error。
console.log和console.error這兩個(gè)最后的回調(diào)函數(shù),用法上有一點(diǎn)重要的區(qū)別。console.log只顯示回調(diào)函數(shù)step4的返回值,而console.error可以顯示step2、step3、step4之中任何一個(gè)發(fā)生的錯(cuò)誤。也就是說,假定step2操作失敗,拋出一個(gè)錯(cuò)誤,這時(shí)step3和step4都不會再運(yùn)行了,promises對象開始尋找接下來的第一個(gè)錯(cuò)誤回調(diào)函數(shù),在上面代碼中是console.error。所以,結(jié)論就是Promises對象的錯(cuò)誤有傳遞性。
換言之,上面的代碼等同于下面的形式。
try { var v1 = step1(); var v2 = step2(v1); var v3 = step3(v2); var v4 = step4(v3); console.log(v4); } catch (error) { console.error(error); }
上面代碼表示,try部分任何一步的錯(cuò)誤,都會被catch部分捕獲,并導(dǎo)致整個(gè)Promise操作的停止。
Promise的用法,簡單說就是一句話:使用then方法添加回調(diào)函數(shù)。但是,不同的寫法有一些細(xì)微的差別,請看下面四種寫法,它們的差別在哪里?
// 寫法一 doSomething().then(function () { return doSomethingElse(); }); // 寫法二 doSomething().then(function () { doSomethingElse(); }); // 寫法三 doSomething().then(doSomethingElse()); // 寫法四 doSomething().then(doSomethingElse);
為了便于解釋,上面四種寫法都再用then方法接一個(gè)回調(diào)函數(shù)。
寫法一的finalHandler回調(diào)函數(shù)的參數(shù),是doSomethingElse函數(shù)的運(yùn)行結(jié)果。
doSomething().then(function () { return doSomethingElse(); }).then(finalHandler);
寫法二的finalHandler回調(diào)函數(shù)的參數(shù),是undefined。
doSomething().then(function () { doSomethingElse(); }).then(finalHandler);
寫法三的finalHandler回調(diào)函數(shù)的參數(shù),是doSomethingElse函數(shù)返回的回調(diào)函數(shù)的運(yùn)行結(jié)果。
doSomething().then(doSomethingElse()) .then(finalHandler);
寫法四與寫法一只有一個(gè)差別,那就是doSomethingElse會接收到doSomething()
返回的結(jié)果。
doSomething().then(doSomethingElse) .then(finalHandler);
為了真正理解Promise對象,下面我們自己動(dòng)手寫一個(gè)Promise的實(shí)現(xiàn)。
首先,將Promise定義成構(gòu)造函數(shù)。
var Promise = function () { this.state = 'pending'; this.thenables = []; };
上面代碼表示,Promise的實(shí)例對象的state屬性默認(rèn)為“未完成”狀態(tài)(pending),還有一個(gè)thenables屬性指向一個(gè)數(shù)組,用來存放then方法生成的內(nèi)部對象。
接下來,部署實(shí)例對象的resolve方法,該方法用來將實(shí)例對象的狀態(tài)從“未完成”變?yōu)椤耙淹瓿伞薄?/p>
Promise.prototype.resolve = function (value) { if (this.state != 'pending') return; this.state = 'fulfilled'; this.value = value; this._handleThen(); return this; }
上面代碼除了改變實(shí)例的狀態(tài),還將異步任務(wù)的返回值存入實(shí)例對象的value屬性,然后調(diào)用內(nèi)部方法_handleThen,最后返回實(shí)例對象本身。
類似地,部署實(shí)例對象的reject方法。
Promise.prototype.reject = function (reason) { if (this.state != 'pending') return; this.state = 'rejected'; this.reason = reason; this._handleThen(); return this; };
然后,部署實(shí)例對象的then方法。它接受兩個(gè)參數(shù),分別是異步任務(wù)成功時(shí)的回調(diào)函數(shù)(onFulfilled)和出錯(cuò)時(shí)的回調(diào)函數(shù)(onRejected)。為了可以部署鏈?zhǔn)讲僮?,它必須返回一個(gè)新的Promise對象。
Promise.prototype.then = function (onFulfilled, onRejected) { var thenable = {}; if (typeof onFulfilled == 'function') { thenable.fulfill = onFulfilled; }; if (typeof onRejected == 'function') { thenable.reject = onRejected; }; if (this.state != 'pending') { setImmediate(function () { this._handleThen(); }.bind(this)); } thenable.promise = new Promise(); this.thenables.push(thenable); return thenable.promise; }
上面代碼首先定義了一個(gè)內(nèi)部變量thenable對象,將then方法的兩個(gè)參數(shù)都加入這個(gè)對象的屬性。然后,檢查當(dāng)前狀態(tài),如果不等于“未完成”,則在當(dāng)前操作結(jié)束后,立即調(diào)用_handleThen方法。接著,在thenable對象的promise屬性上生成一個(gè)新的Promise對象,并在稍后返回這個(gè)對象。最后,將thenable對象加入實(shí)例對象的thenables數(shù)組。
下一步就要部署內(nèi)部方法_handleThen,它用來處理通過then方法綁定的回調(diào)函數(shù)。
Promise.prototype._handleThen = function () { if (this.state === 'pending') return; if (this.thenables.length) { for (var i = 0; i < this.thenables.length; i++) { var thenPromise = this.thenables[i].promise; var returnedVal; try { // 運(yùn)行回調(diào)函數(shù) } catch (e) { thenPromise.reject(e); } } this.thenables = []; } }
上面代碼的邏輯是這樣的:如果實(shí)例對象的狀態(tài)是“未完成”,就返回,否則檢查thenables屬性是否有值。如果有值,表明里面儲存了需要執(zhí)行的回調(diào)函數(shù),則依次運(yùn)行回調(diào)函數(shù)。運(yùn)行完成后,清空thenables屬性。
之所以把回調(diào)函數(shù)的執(zhí)行放在try...catch結(jié)構(gòu)中,是因?yàn)橐坏┏鲥e(cuò),就會自動(dòng)執(zhí)行catch代碼塊,從而可以運(yùn)行下一個(gè)Promise實(shí)例對象的reject方法,這使得調(diào)用reject方法變得很簡單。下面是try代碼塊中的代碼。
try { switch (this.state) { case 'fulfilled': if (this.thenables[i].fulfill) { returnedVal = this.thenables[i].fulfill(this.value); } else { thenPromise.resolve(this.value); } break; case 'rejected': if (this.thenables[i].reject) { returnedVal = this.thenables[i].reject(this.reason); } else { thenPromise.reject(this.reason); } break; } if (returnedVal === null) { this.thenables[i].promise.resolve(returnedVal); } else if (returnedVal instanceof Promise || typeof returnedVal.then === 'function') { returnedVal.then(thenPromise.resolve.bind(thenPromise), thenPromise.reject.bind(thenPromise)); } else { this.thenables[i].promise.resolve(returnedVal); } }
上面代碼首先根據(jù)實(shí)例對象的狀態(tài),分別調(diào)用fulfill或reject回調(diào)函數(shù),并傳入相應(yīng)的參數(shù),并將返回值存入returnVal變量。然后再去改變this.thenables[i].promise對象的狀態(tài),觸發(fā)下一個(gè)Promise對象的resolve或者reject方法。
針對returnedVal的判斷,目的是如果returnedVal是一個(gè)Promise對象,那么后面的回調(diào)函數(shù)都要改為綁定在它上面。
最后,由于我們寫的是供調(diào)用的函數(shù)庫,需要將構(gòu)造函數(shù)輸出。
module.exports = Promise;
Ajax操作是典型的異步操作,傳統(tǒng)上往往寫成下面這樣。
function search(term, onload, onerror) { var xhr, results, url; url = 'http://example.com/search?q=' + term; xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.onload = function (e) { if (this.status === 200) { results = JSON.parse(this.responseText); onload(results); } }; xhr.onerror = function (e) { onerror(e); }; xhr.send(); } search("Hello World", f1, f2);
上面代碼的回調(diào)函數(shù),必須直接傳入。如果使用Promises方法,就可以寫成下面這樣。
function search(term) { var url = 'http://example.com/search?q=' + term; var p = new Promise(); var xhr = new XMLHttpRequest(); var result; xhr.open('GET', url, true); xhr.onload = function (e) { if (this.status === 200) { results = JSON.parse(this.responseText); p.resolve(results); } }; xhr.onerror = function (e) { p.reject(e); }; xhr.send(); return p; } search("Hello World").then(f1, f2);
用了Promises以后,回調(diào)函數(shù)就可以用then方法加載。
Promises的優(yōu)點(diǎn)在于,讓回調(diào)函數(shù)變成了規(guī)范的鏈?zhǔn)綄懛?,程序流程可以看得很清楚。它的一整套接口,可以?shí)現(xiàn)許多強(qiáng)大的功能,比如為多個(gè)異步操作部署一個(gè)回調(diào)函數(shù)、為多個(gè)回調(diào)函數(shù)中拋出的錯(cuò)誤統(tǒng)一指定處理方法等等。
而且,它還有一個(gè)前面三種方法都沒有的好處:如果一個(gè)任務(wù)已經(jīng)完成,再添加回調(diào)函數(shù),該回調(diào)函數(shù)會立即執(zhí)行。所以,你不用擔(dān)心是否錯(cuò)過了某個(gè)事件或信號。這種方法的缺點(diǎn)就是,編寫和理解都相對比較難。
實(shí)際可以使用的Promises實(shí)現(xiàn),參見jQuery的deferred對象一節(jié)。
Rhys Brett-Bowen, Promises/A+ - understanding the spec through implementation
Matt Podwysocki, Amanda Silver, Asynchronous Programming in JavaScript with “Promises”
Marc Harter, Promise A+ Implementation
Bryan Klimt, What’s so great about JavaScript Promises?
Jake Archibald, JavaScript Promises There and back again
Mikito Takada, 7. Control flow, Mixu's Node book