$.Deferred()和promise() 学习实践

这篇文章偏重入门实践,学习请点这里:
-jQuery的deferred对象详解——阮一峰
-读jQuery之二十(Deferred对象)——Snandy

骨感的语法

// ajax请求封装
function getData(){
  var dtd = $.Deferred();
  $.ajax({url:'test.php'})
    .done(function() {dtd.resolve(); }) ---->--------------------+
    .fail(function() {dtd.reject(); }); --->----------+          |
  return dtd.promise();                               |          |
}                                                     |          |
                                                      |          |
//执行ajax,传入回调函数                                 |          v
function init() {                                     v          |
  $.when(getData())                                   |          |
     .then(                                           |          |
        function(){},   // 回调函数1,resolve执行 ------+------<---+
        function(){}    // 回调函数2,reject执行 _______|
     );
}

init();

有血有肉的demo代码:


// ajax请求封装
function getData(){
    var dtd = $.Deferred();
    $.ajax({
        url: 'www.baidu.com/test.php',
        dataType: 'jsonp',  // 可选,跨域
        jsonp: 'cb',        // 可选,跨域
        data: {
            action : 'r',
        }
    }).done(function(data) {        // ajax请求成功
        if(data.status == '0') {
            dtd.resolve(data);      // 相当于ajax的success
        } else {                    // 请求返回值异常(如:未登录,无数据,参数异常)
            dtd.reject(data);       // 相当于ajax的success,只是并未返回预期数据
        }
    }).fail(function(data) {        // ajax请求失败
        dtd.reject(data);               // 相当于ajax的fail
    });
    return dtd.promise();
}

//执行ajax,传入回调函数
function init() {
    $.when(getData).then(
        function (data){            // 回调函数1,resolve执行
            console.log('resolve 处理逻辑执行');
        },
        function(data) {            // 回调函数2,reject执行
            console.log('reject 处理逻辑执行');
        }
    )
}

init();

你可能感兴趣的:($.Deferred()和promise() 学习实践)