熟練使用使用jQuery Promise (Deferred)

zhjx922 發布于2019-08-22 10:41 / 2300人閱讀

摘要：情景再現以前用寫后端程序時，遇到這個概念，這個東西好呀不用謝一層一層回調，直接用類似于的連綴方式。后來遇到這個庫，它就是庫中很有名的。我希望可以把用在前端的請求上，但是我不想又引入。后來發現，本身就具有類似于的東西。

1 情景再現

以前用nodejs寫后端程序時，遇到Promise這個概念，這個東西好呀！不用謝一層一層回調，直接用類似于jQuery的連綴方式。后來遇到bluebird這個庫，它就是Promise庫中很有名的。我希望可以把Promise用在前端的ajax請求上，但是我不想又引入bluebird。后來發現，jquery本身就具有類似于Promise的東西。于是我就jquery的Promise寫一些異步請求。

2 不堪回首

看看一看我以前寫異步請求的方式

// 函數定義
function sendRequest(req,successCallback,errorCallback){
    $.ajax({
        ...
        ...
        success:function(res){
            successCallback(res);
        },
        error:function(res){
            errorCallback(res);
        }
    });
}

// 函數調用,這個函數的匿名函數寫的時候很容易出錯，而且有時候難以理解
sendRequest(req,function(res){
    //請求成功
    ...
},function(res){
    //請求失敗
    ...
});

3 面朝大海

下面是我希望的異步調用方式

sendRequest(req)
.done(function(res){
    //請求成功
    ...
})
.fail(function(req){
    //請求失敗
    ...
});

4 廢話少說，放‘碼’過來

talk is cheap, show me the code

// 最底層的發送異步請求，做成Promise的形式

App.addMethod("_sendRequest",function(path,method,payload){
    var dfd = $.Deferred();
    $.ajax({
        url:path,
        type:method || "get",
        headers:{
            sessionId:session.id || ""
        },
        data:JSON.stringify(payload),
        dataType:"json",
        contentType : "application/json; charset=UTF-8",
        success:function(data){
            dfd.resolve(data);
        },
        error:function(data){
            dfd.reject(data);
        }
    });
    return dfd.promise();
});

//根據callId查詢錄音文件，不僅僅是異步請求可以做成Promise形式，任何函數都可以做成Promise形式
App.addMethod("_getRecordingsByCallId",function(callId){
    var dfd = $.Deferred(),
        path = "/api/tenantcalls/"+callId+"/recordings";

    App._sendRequest(path)
    .done(function(res){dfd.resolve(res);})
    .fail(function(res){dfd.reject(res);});

    return dfd.promise();
});

// 獲取錄音
App.addMethod("getCallDetailRecordings",function(callId){
    App._getRecordingsByCallId(callId)
    .done(function(res){
        // 獲取結果后渲染數據
        App.renderRecording(res);
    })
    .fail(function(res){
        App.error(res);
    });
});

5 注意事項

jQuery的Promise主要是用了jQquery的$.Derferred()方法，一些老版本的jquery并不支持此方法。

jQuery版本必須大于等于1.5，推薦使用1.11.3

6 參考文獻

jquery官方api文檔

jquery維基百科文檔

7 最后

以上文章僅供參考，不包完全正確。歡迎評論，3q。

云服務器 GPU云服務器熟練使用linux系統 promise_deferred區別 Promise使用 jquery_deferred對象

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91074.html

通過 ES6 Promise 和 jQuery Deferred 的異同學習 Promise

摘要：和和都有和，但是略有不同。實際上返回的是一個對象。和添加的回調，添加的回調。所以在調用成功的情況下執行添加的回調，調用失敗時執行添加的回調。，產生對象并，產生對象并，然后繼續處理，的語法糖，和的差不多但不同。 Deferred 和 Promise ES6 和 jQuery 都有 Deffered 和 Promise，但是略有不同。不過它們的作用可以簡單的用兩句話來描述 Deffere...

Yujiaao 2019-08-21 10:39 評論0 收藏0
jQuery deffered和promise對象方法

摘要：三和對象方法對象其實就是對象的特例，因為對象不能更改異步狀態，而對象可以。方法依次接受三個回調，分別為對象后觸發的回調，返回一個對象。注意，必須傳入函數，而該函數只有返回一個對象，才能夠讓異步事件按照預期順序來執行。對象的方法對象和對象一、前言為了讓前端們從回調的地獄中回到天堂，jQuery也引入了Promise的概念。Promise是一種令代碼異步行為更加優雅的抽象，有了它，我...

Render 2019-08-19 14:53 評論0 收藏0
jQuery源碼解析Deferred異步對象

摘要：回調隊列對象，用于構建易于操作的回調函數集合，在操作完成后進行執行。對象對象，用于管理回調函數的多用途列表。如果傳入一個延遲對象，則返回該對象的對象，可以繼續綁定其余回調，在執行結束狀態之后也同時調用其回調函數。在工作中我們可能會把jQuery選擇做自己項目的基礎庫，因為其提供了簡便的DOM選擇器以及封裝了很多實用的方法，比如$.ajax()，它使得我們不用操作xhr和xdr對象，直...

Coding01 2019-08-21 17:13 評論0 收藏0
Promise介紹--Deferred及jQuery篇

摘要：我們稱為回調對象，它內部會維護一個數組，我們可以向其中添加若干個回調函數，然后在某一條件下觸發執行。第一次之后，再次新的回調函數時，自動執行回調。當前面的回調函數返回時，終止后面的回調繼續執行。最近懶癌發作，說好的系列文章，寫了一半，一直懶得寫，今天補上一篇。 Deferred 我們在使用promise對象時，總會提到一個與它關系密切的對象——Deferred。其實Deferred沒...

Darkgel 2019-08-21 11:23 評論0 收藏0
jQuery中的Deferred和promise 的區別

摘要：使用的好處有以下幾點你可以多次調用和函數，并使用不同的回調函數。或許你的一個回調函數用來停止動畫，一個用來發起一個新的請求，一個用來將接受到的數據展示給用戶。即使在調用完成之后，你依然可以調用和函數，并且回調函數可以立即執行。 Deferred和Promise之間有什么區別呢？ promise 一個promise就是一個由異步函數返回的對象。當你想要自己編寫一個這樣的函數時你需要使用一...

rickchen 2019-08-19 18:00 評論0 收藏0