熟练使用使用jQuery Promise (Deferred)

zhjx922 发布于2019-08-22 10:41 / 2205人阅读

摘要：情景再现以前用写后端程序时，遇到这个概念，这个东西好呀不用谢一层一层回调，直接用类似于的连缀方式。后来遇到这个库，它就是库中很有名的。我希望可以把用在前端的请求上，但是我不想又引入。后来发现，本身就具有类似于的东西。

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。

海外云主机服务器托管熟练使用linux系统 promise_deferred区别 Promise使用 jquery_deferred对象

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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