1、Deferred对象:
一般在函数内部进行声明,并在运行过程中改变其状态,例如成功或失败,最终返回Promise对象用于状态监听。
主要方法:
Deferred.resolve(param...) :执行成功,将会触发Promise对象的done回调方法。
Deferred.reject(param...) :执行失败,将会触发Promise对象的fail回调方法。
Deferred.notify(param...) :正在执行,将会触发Promise对象的progress回调方法。
Deferred.promise() :返回Promise对象实例。
其他说明:
使用 $.Deferred() 即可声明一个Deferred对象。
2、Promise对象:
可以将其看作Deferred的一个实例,在函数状态改变时将会触发Promise对象的相应回调方法。
主要方法:
Promise.done(callback) :执行成功时的回调方法。
Promise.fail(callback) :执行失败时的回调方法。
Promise.progress(callback) :正在执行时的回调方法。
Promise.always(callback) :只要Deferred的状态发生改变就会触发always方法,类似于finally。
Promise.then(doneCallback, failCallback, progressCallback) :另外一种定义回调函数的方式。
其他说明:
Promise的所有方法均返回Promise对象,因此可以链式调用,比如:Promise.done(funA).fail(funB).always(funC)
JQuery的Ajax方法默认返回Promise对象,因此可以直接使用Promise的各种回调方法。
3、代码示例:
1 //-- 全局变量 --------------------------- 2 var flagA = flagB = flagC = ""; 3 4 //-- Fun : waitA --------------------------- 5 var waitA = function(ms){ 6 if(!ms) ms = 2000; 7 var def = $.Deferred(); 8 setTimeout( function(){ flagA = "waitA执行成功"; def.resolve(flagA); }, ms); 9 return def.promise(); 10 }; 11 //-- Fun : waitB --------------------------- 12 var waitB = function(ms){ 13 if(!ms) ms = 2000; 14 var def = $.Deferred(); 15 setTimeout( function(){ flagB = "waitB执行失败"; def.reject(flagB); }, ms); 16 return def.promise(); 17 }; 18 //-- Fun : waitC --------------------------- 19 var waitC = function(ms){ 20 if(!ms) ms = 2000; 21 var def = $.Deferred(); 22 setTimeout( function(){ flagC = "waitC执行失败"; def.reject(flagC); }, ms); 23 return def.promise(); 24 }; 25 26 //-- 调用方式一: 27 waitA(2000).done(function(msg){ 28 console.info(msg); 29 }).fail(function(msg){ 30 console.info(msg); 31 }).always(function(msg){ 32 console.info(msg); 33 }); 34 35 //-- 调用方式二: 36 waitA(2000).then(function(msg){ 37 console.info(msg); 38 }, function(msg){ 39 console.info(msg); 40 }); 41 42 //--调用方式三: 43 $.when(waitA(2000)).then(function(msg){ 44 console.info(msg); 45 }, function(msg){ 46 console.info(msg); 47 }); 48 49 //--调用方式四:按顺序执行三个函数 50 $.when(waitA(2000)).then(waitB).then(waitC); 51 //或者: 52 $.when(waitA(2000)).then(function(msg){ 53 console.info(msg); 54 waitB(2000).then(function(msg){ 55 console.info(msg); 56 waitC(2000).then(function(msg){ 57 console.info(msg); 58 }); 59 }); 60 }); 61 62 //--调用方式五:同时执行三个函数 63 $.when(waitA(1000), waitB(2000), waitC(3000)).then(function(mes){ 64 console.info("全部执行成功!" + mes); 65 }, function(mes){ 66 console.warn("未全部执行成功,其中:" + mes); 67 });
宠辱不惊,看庭前花开花落;去留无意,望天上云卷云舒