$.Deferred()和promise() 學(xué)習(xí)實踐

這篇文章偏重入門實踐,學(xué)習(xí)請點這里:
-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();                               |          |
}                                                     |          |
                                                      |          |
//執(zhí)行ajax,傳入回調(diào)函數(shù)                                 |          v
function init() {                                     v          |
  $.when(getData())                                   |          |
     .then(                                           |          |
        function(){},   // 回調(diào)函數(shù)1,resolve執(zhí)行 ------+------<---+
        function(){}    // 回調(diào)函數(shù)2,reject執(zhí)行 _______|
     );
}

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);      // 相當(dāng)于ajax的success
        } else {                    // 請求返回值異常(如:未登錄,無數(shù)據(jù),參數(shù)異常)
            dtd.reject(data);       // 相當(dāng)于ajax的success,只是并未返回預(yù)期數(shù)據(jù)
        }
    }).fail(function(data) {        // ajax請求失敗
        dtd.reject(data);               // 相當(dāng)于ajax的fail
    });
    return dtd.promise();
}

//執(zhí)行ajax,傳入回調(diào)函數(shù)
function init() {
    $.when(getData).then(
        function (data){            // 回調(diào)函數(shù)1,resolve執(zhí)行
            console.log('resolve 處理邏輯執(zhí)行');
        },
        function(data) {            // 回調(diào)函數(shù)2,reject執(zhí)行
            console.log('reject 處理邏輯執(zhí)行');
        }
    )
}

init();
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容