then.jsJavaScript異步回調(diào)
then.js
Another very small promise!
能用簡(jiǎn)單優(yōu)美的方式將任何同步或異步回調(diào)函數(shù)轉(zhuǎn)換成then()鏈?zhǔn)秸{(diào)用!
then.js不同于其它promise,它沒(méi)有resolve、也沒(méi)有reject、更沒(méi)有promise對(duì)象,所以你不再需要把異步任務(wù)封裝成promise對(duì)象。
一個(gè)典型的promise都要封裝:
function getFile() {
var deferred = Q.defer();
FS.readFile("foo.txt", "utf-8", function (error, text) {
if (error) {
deferred.reject(new Error(error));
} else {
deferred.resolve(text);
}
});
return deferred.promise;
}
getFile().then(successHandler[, errorHandler]);
若要進(jìn)入下一個(gè)then鏈,上面then中的successHandler、errorHandler還得進(jìn)行如上類(lèi)似封裝,搞得挺復(fù)雜!
then.js只有then對(duì)象,它包括then、all和fail三個(gè)方法和觸發(fā)器defer,無(wú)需封裝,直接將異步任務(wù)寫(xiě)入then()!因?yàn)閠hen、all和fail都能自動(dòng)生成下一個(gè)then對(duì)象,reject和resolve被合并為defer并注入任務(wù)函數(shù),reject和resolve合并為defer的好處是,簡(jiǎn)化代碼,還可以直接代替callback!
then.js使用模式
直鏈:
then(function (defer) {
// ....
defer(err, ...);
}).then(function (defer, value) {
// ....
defer(err, ...);
}, function (defer, err) {
// ....
defer(err, ...);
}).then(function (defer) {
// ....
defer(err, ...);
}).all(function (defer, err, value) {
// ....
defer(err, ...);
}).then(function (defer) {
// ....
defer(err, ...);
}).fail(function (defer, err) {
// ....
});
嵌套:
then(function (defer) {
// ....
defer(err, ...);
}).then(function (defer, value) {
//第二層
then(function (defer2) {
// ....
defer2(err, ...);
}).then(function (defer2, value) {
//第三層
then(function (defer3) {
// ....
}).all(defer2); // 返回二層
}).then(function (defer2) {
// ....
defer(err, ...); // 返回一層
}).fail(defer); // 返回一層
}).then(function (defer) {
// ....
defer(err, ...);
}).fail(function (defer, err) {
// ....
});
async 嵌套:
then(function (defer) {
// ....
defer(err, array);
}).then(function (defer, array) {
then.each(array, function (next, value) {
// ....逐步執(zhí)行同步或異步任務(wù)
return next ? next() : defer();
});
}).then(function (defer) {
// ....
defer(err, ...);
}).fail(function (defer, err) {
// ....
});
then對(duì)象取代callback:
function getFileAsync() {
return then(function (defer) {
readFile(failname, defer);
}).then(function (defer, fileContent) {
// 處理fileContent
defer(null, result);
}).fail(function (defer, err) {
// 處理error
defer(err);
});
}
getFileAsync().then(function (defer, file) {
// ....
}).fail(function(defer, err) {
// ....
});
更多用法請(qǐng)參考jsGen源代碼,里面包含了一百多個(gè)then任務(wù)鏈,幾百個(gè)then對(duì)象!
Who Used
- AngularJS中文社區(qū):http://angularjs.cn/
API
promise模式:
-
入口函數(shù)then():
var thenObj = then(function(defer) { // 執(zhí)行同步或異步任務(wù) defer(err, result1, ...); }) // 入口函數(shù)返回then對(duì)象 -
then對(duì)象的then方法:
thenObj.then(function(defer, successResult, ...) { // Success Handler // 執(zhí)行同步或異步任務(wù) defer(err, result1, ...); }, function(defer, successResult, ...) { // Error Handler,可選 // 執(zhí)行同步或異步任務(wù) defer(err, result1, ...); }) // then方法返回新的then對(duì)象(即下一個(gè)then鏈) -
then對(duì)象的all方法:
thenObj.all(function(defer, err, successResult, ...) { // All Handler // 執(zhí)行同步或異步任務(wù) defer(err, result1, ...); }) // all方法返回新的then對(duì)象(即下一個(gè)then鏈) -
then對(duì)象的fail方法:
thenObj.fail(function(defer, err) { // Error Handler // 執(zhí)行同步或異步任務(wù) defer(err, result1, ...); }) // fail方法返回新的then對(duì)象(即下一個(gè)then鏈) -
關(guān)于Error收集器
then對(duì)象的then方法的errorHandler函數(shù)、all方法、fail方法均能收集error。其中then方法的errorHandler函數(shù)和all方法只能收集上一個(gè)then對(duì)象產(chǎn)生的error;fail方法則能收集再它之前所有then鏈產(chǎn)生的error。
-
關(guān)于觸發(fā)器defer
then.js中最關(guān)鍵的就是defer,用于觸發(fā)下一個(gè)then鏈。從上面可知,入口函數(shù)、then方法、all方法、fail方法中的任務(wù)函數(shù)的第一個(gè)參數(shù)都被注入了defer方法,如果任務(wù)函數(shù)本身是一個(gè)defer方法,則不會(huì)再被注入defer方法。
defer的第一個(gè)參數(shù)永遠(yuǎn)是error,如果error存在,則error下一個(gè)then對(duì)象的Error收集器,如果Error收集器不存在,則拋出error。
如果異步任務(wù)的callback的第一個(gè)參數(shù)為error,即callback(error, result1, ...)的形式,則可直接用defer代替異步任務(wù)的callback。Node.js中的異步函數(shù)基本都是這種形式,then.js用起來(lái)超方便。
-
關(guān)于fail方法
fail方法能捕捉在它之前的then鏈中的任何一個(gè)error。fail的優(yōu)先級(jí)低于then方法的errorHandler和all方法,即then對(duì)象不存在then方法的errorHandler和all方法時(shí)error才會(huì)進(jìn)入fail。當(dāng)then鏈的某個(gè)then對(duì)象產(chǎn)生了error時(shí),如果該then對(duì)象的下一個(gè)then對(duì)象存在Error收集器,則error進(jìn)入該Error收集器,否則error會(huì)直接進(jìn)入then鏈下游最近的fail方法,其間的then對(duì)象均會(huì)跳過(guò)。
async模式:
then.each(array, function (next, value, index, array) {
// 逐步執(zhí)行同步或異步任務(wù)
asyncTask(value, function () {
return next ? next() : callback();
})
});
Install
Node.js:
npm install thenjs
var then = require('thenjs');
Browser:
注意:then.js需要bind方法支持,IE8及以下請(qǐng)先加載es5-shim.js
Examples
then(function (defer) {
// start asnys task
// use defer as callback function
asnycTask1(param, defer);
}).
then(function (defer, value1, ...) {
// successHandler, value1, ... from asnycTask1
asnycTask2(value1, ..., defer);
}, function (defer, err) {
// errorHandler, err from asnycTask1
console.error(err);
}).
then(function (defer, value) {
// successHandler, value from asnycTask2
asnycTask3(value, defer);
}).
then(function (defer, value) {
// successHandler, value from asnycTask3
asnycTask4(value, defer);
}).
fail(function (defer, err) {
// global errorHandler, err from asnycTask2 or asnycTask3
console.error(err);
});