jQuery Deferred和Promise的使用介绍:
deferred对象是从jquery1.5.0引入的一个新对象,ES6也引入了Promise的正式规范。
抽象来说,deferreds 可以理解为表示需要长时间才能完成的耗时操作的一种方式,相比于阻塞式函数它们是异步的,而不是阻塞应用程序等待其完成然后返回结果。deferred对 象会立即返回,然后你可以把回调函数绑定到deferred对象上,它们会在异步处理完成后被调用。
下面几个例子来看deferred的使用
//实例1 var defer = $.Deferred(); defer.done(function(a, b) { alert("执行done方法:" + (a + b)); }) .fail(function(a, b) { alert("执行fail输出:" + (a + b)); }) .then(function(a) { alert("执行then输出" + a); }) .always(function() { alert("执行结束函数") }); defer.resolve(1, 2); //调用Deferred的done方法并执行回调thenh和执行always方法 //defer.reject(1, 2); //调用Deferred的fail方法并执行回调then(callback,callback)第个参数回调方法和执行always方法
//实例2 var dtd = $.Deferred(); // 生成Deferred对象 var wait = function() { alert("执行wait函数"); dtd.resolve(); }; dtd.promise(wait); wait.done(function() { alert("执行成功了!"); }) .fail(function() { alert("出错啦"); }); wait();
利用dtd.promise方法将wait附加到Deferred对象上
//实例3 var promise = function() { return $.Deferred(function(dfd) { setTimeout(function() { alert("执方法1"); dfd.resolve(); }, 5000); }) .promise(); } var promise2 = function() { return $.Deferred(function (dfd) { alert("执行方法2"); dfd.resolve(); }) .promise(); } var promise3 = function () { return $.Deferred(function (dfd) { alert("执行方法3"); dfd.resolve(); }) .promise(); } $.when( promise(), promise2(), promise3() ) .then(function() { alert("promise执行完成"); }) .fail(function() { alert("执行失败"); });
上述代码依次执行完promise,promise2,promise3函数才会回调then。
Deferred的方法:
jQuery.Deferred() |
创建一个新的Deferred对象的构造函数,可以带一个可选的函数参数,它会在构造完成后被调用。 |
jQuery.when() |
通过该方式来执行基于一个或多个表示异步任务的对象上的回调函数 |
jQuery.ajax() |
执行异步Ajax请求,返回实现了promise接口的jqXHR对象 |
deferred.then(resolveCallback,rejectCallback) |
添加处理程序被调用时,递延对象得到解决或者拒绝的回调。 |
deferred.done() |
当延迟成功时调用一个函数或者数组函数. |
deferred.fail() |
当延迟失败时调用一个函数或者数组函数.。 |
deferred.resolve(ARG1,ARG2,...) |
调用Deferred对象注册的‘done’回调函数并传递参数 |
deferred.resolveWith(context,args) |
调用Deferred对象注册的‘done’回调函数并传递参数和设置回调上下文 |
deferred.isResolved |
确定一个Deferred对象是否已经解决。 |
deferred.reject(arg1,arg2,...) |
调用Deferred对象注册的‘fail’回调函数并传递参数 |
deferred.rejectWith(context,args) |
调用Deferred对象注册的‘fail’回调函数并传递参数和设置回调上下文 |
deferred.promise() |
返回promise对象,这是一个伪造的deferred对象:它基于deferred并且不能改变状态所以可以被安全的传递 |