Jquery Ajax的链式操作(chaining)

1月 2, 2018 |

jquery 1.5以前,将ajax所有的事件处理器作为$.ajax() 参数对象的属性(success:function(){}, error:function(){})传入。写法如下

$.ajax({
   url: "http://fiddle.jshell.net/favicon.png",
   success: function() { 
        if ( console && console.log ) { 
           console.log( "Sample of data:", data.slice( 0, 100 ) ); 
        }  
    } 
});

从1.5开始, 可以按照如下的写法:

$.ajax({   
url: "http://fiddle.jshell.net/favicon.png" 
}).done(function( data ) {    
   if ( console && console.log ) {
      console.log( "Sample of data:", data.slice( 0, 100 ) );    
   }  
});

这主要归功于Jquery新的Deferred  对象的功劳, $.ajax() 返回的是jqXHR 对象,改对象克隆了promise对象的所有方法所以通过jqXHR.done()添加的各种事件处理器能被正确的执行,从而代码的可读性大大的提高。
Deferred 对象也可以直接使用,比如

var wait = function() { 
var dtd = $.Deferred(); 
var tasks = function() {   
  alert("定时器回调函数成功执行"); 
  dtd.resolve(); 
}; 
setTimeout(tasks, 2000); 
return dtd.promise();
};
//$.when 用于将多个promise对象封装成一个promise对象,所有被封装的promise的状态为resoved, 那么该封装promise的状态为resolved,触发通过promise.done()。 只要有一个promise的状态为rejected, 那么该封装promise的状态为rejected,触发通过promise.fail() 添加的处理器函数.
var promise = $.when( wait() );
promise.done(function() {
 alert("通过promise添加的处理器执行");
});
#由于添加处理器时promise的状态为resolved, 所以立即执行该处理器函数
setTimeout(function(){ 
 promise.done(function(){ 
    alert("延后通过promise添加的处理器执行"); 
 });
}, 5000);

参考文档

introduction-jquery-deferred-objects/

Posted in: WEB开发

Comments are closed.