皮皮网

1.jQuery中的Deferred和promise 的区别
2.手写一个(jQuery版)ajax
3.JQuery 的 deferred . promise对象
4.jQuery中的Deferred和promise 的区别

jQuery中的Deferred和promise 的区别

       Deferred 和 Promise

       ES6 和 jQuery 都有 Deffered 和 Promise，但是略有不同。不过它们的作用可以简单的用两句话来描述

       Deffered 触发 resolve 或 reject

       Promise 中申明 resolve 或 reject 后应该做什么（回调）

       åœ¨ jQuery 中

       var deferred = $.Deferred(); var promise = deferred.promise();

       åœ¨ ES6 中

       var deferred = Promise.defer(); var promise= defered.promise;

       MDN 宣布 Deferred 在 Gecko 中被申明为过期，不应该再使用，而应该用 new Promise() 来代替。关于 new Promise() 将在后面说明。

       jQuery 的 Deferred/Promise

       jQuery 中最常用的 Promise 对象是 $.ajax() 返回的，最常用的方法不是 then ，而是 done 、 fail 和 always 。除了 $.ajax() 外，jQuery 也提供了 $.get() 、 $.post() 和 $.getJSON() 等简化 Ajax 调用，它们返回的和 $.ajax() 的返回值一样，是个 Promise 对象。

       å®žé™…上 $.ajax() 返回的是一个 jqXHR 对象 。但 jqXHR 实现了 jQuery 的 Promise 接口，所以也是一个 Promise 对象。

       done() 、 fail() 和 always()

       done() 添加 deferred.resolve() 的回调， fail() 添加 deferred.reject() 的回调。所以在 Ajax 调用成功的情况下执行 done() 添加的回调，调用失败时执行 fail() 添加的回调。但不管成功与否，都会执行 always() 添加的回调。

       è¿™é‡Œ done() 、 fail() 和 always() 都是以类似事件的方式添加回调，也就意味着，不管执行多次次 done() 、 fail() 或 always() ，它们添加的若干回调都会在符合的条件下依次执行。

       ä¸€èˆ¬æƒ…况下会这样执行 Ajax

       // 禁用按钮以避免重复提交 $("#theButton").prop({ disabled: true }); // 调用 Ajax 提交数据，假设返回的是 JSON 数据 var jqxhr = $.ajax("do/example", { type: "post", dataType: "json", data: getFormData() }); jqxhr.done(function(jsonObject) { // Ajax 调用成功 console.log("success with data", jsonObject); }).fail(function() { // Ajax 调用失败 console.log("failed") }).always(function() { // 不管成功与否，都会执行，取消按钮的禁用状态 $("#theButton").prop({ disabled: false }); });

       ä¸Šé¢æ˜¯æœ€æ™®é€šæœ€å¸¸ç”¨çš„用法，但是在一个项目中总是这么写 Ajax，有点累，稍微约定一下再封装一下就使用起来就会便捷得多。首先，假设我们定义返回的 JSON 是这样的格式：

       { "code": "int, 0 表示成功，其它值表示出错", "message": "string, 附加的消息，可选", "data": "object，附加的数据，可选 }

       ç„¶åŽä¸ºé¡¹ç›®å…¬å…±ç±» app 定义一个 ajax 方法

       app.ajax = function(button, url, data) { if (button) { button.prop("disabled", true); } return $.ajax(url, { type: "post", dataType: "json", data: data }).done(function(json) [ if (json.code !== 0) { showError(json.message || "操作发生错误"); } }).fail(function() { showError("服务器错误，请稍后再试"); }).always(function() { if (button) { button.prop("disabled", false); } }); }; // 调用 app.ajax("do/example", getFormData().done(function(json) { if (json.code === 0) { // 只需要处理正确的情况啦 } });

手写一个(jQuery版)ajax

       手工实现ajax，基于先前的原生js实现jsonp和ajax文章，我们只需对原生js进行优化，形成简洁的api。(因此，本文的java中enum源码实现将从原生版ajax开始。)

       阅读本文后，你将掌握以下内容：

       1.通过对象传参的方式简化参数表

       2.使用ES6的解构赋值去除冗余

       3.通过Promise和then分离参数表中的函数

       4.应用上述技巧

       5.其他相关知识点

       一、对象传参套路

       1.当函数拥有多个参数时，调用可能不够直观，难以理解每个参数的具体含义

       例如：process(null, 1, null, 2, null, null, null, 3)

       这时可以考虑将参数打包成具有结构的对象，传递一个对象参数

       使用对象传参的优势在于，逻辑更加清晰，无需考虑参数的具体位置，参数的对应关系可以直接从键值对中解析。此外，扩展更加简单。

       细节：在传参时，通常将形式参数命名为options。云社区源码

       2.效果：

       before:多个参数传入

       after:一个对象传入

       二、ES6语法：解构赋值与交换赋值

       1.解构赋值

       若对象options = { key1: value1, key2:value2, key3:value3}

       则可以通过以下语句一次性获取options内部的三个值

       2.交换赋值

       顾名思义，就是将两个变量的值进行交换。在ES6之前，可能需要写3句代码，而在ES6中只需一句。

       三、then与Promise

       1.then

       使用jQuery的ajax函数时，可以将参数对象的鱼兜儿源码函数(sucess,failure)通过then传入。

       then的语法：

       2.Promise

       Promise是window的一个全局函数，是构造then的关键。

       语法：

       四、手写一个jQuery版ajax

       这里从上一篇文章的原生版ajax出发，利用本文提到的三个技巧逐步优化，形成jQuery风格的ajax

       五、其他小知识

       1.前端中文文档集合（上哪找文档？）

       cndevdocs.com

       2.一个函数如何接受两种参数个数？（参数个数的重载）

       比如：函数f可以这样调用f(var1)，也可以f(var1, var2)

       a : 很简单，判断arguments.length即可

       3.XHR设置请求与获取响应

       设置请求：

       第一部分： xhr.open('get',黎川麻将源码 '/xxx')

       第二部分： xhr.setHeader('content-type', 'x-www-form-urlencoded')

       第四部分： xhr.send('a=1&b=2')

       获取响应：

       第一部分： xhr.status / xhr.statusText

       第二部分： xhr.getResponseHeader() / xhr.getAllResponseHeaders()

       第四部分： xhr.responseText

JQuery 的 deferred . promise对象

       你说的这段描述是对 jQuery(selector).promise()的描述，并不是 jQuery.Deferred() 的描述。

       原文是：

Return a Promise object to observe when all actions of a certain type bound to the collection, queued or not, have finished.

       而这段话是说：

jQuery(selector).promise() 函数是返回一个 Promise 对象，这个对象的作用是当绑定到集合也就是$('div')这样取到的集合的指定类型的所有动作(promise方法的第一个参数 type ，默认是fx，也就是动画)是否已经完成了。

       英文水平有限，有些地方看不怎么懂，这话说得有点乱，不过意思应该是网上史馆源码这样的，举个例子：

$('#message')

       .animate({ width:, height:}, )

       .promise()

       .done(function(){

           console.log('animate end');

       });

       也可以写成：

$('#message').animate({ width:, height:}, );

       var promise = $('#message').promise();

       promise.done(function(){

           console.log('animate end');

       });

       这里的 $('#message') 就是所说的collection，

       而动画 animate (即 fx)就是 certain type，

       里面的所有动作就是 action queue，当然，这里只有1个，就是默认的fx (但是文档中没有找到介绍其它的类型)。

       后面的 var promise = xxx 就是指返回的 Promise对象，这个对象在收到animate 方法里面的信号(这个信号包括 resolve, reject, notify, resolveWith, rejectWith, and notifyWith等)可以调用方法done(当然还有不少其它的方法，这里没用到就不说了，自己看文档吧)，然后执行done的回调函数了。

       animate方法会自己发送promise的信号，不用手动去处理。具体细节可以参考 jQuery.Deferred() 方法，在API的介绍中有这个方法的使用示例。

       需要注意的是， jQuery(selector).promise()和jQuery.Deferred().promise()是不一样的。

       从目前我知道的来说，jQuery(selector).promise() 是专门用来处理jquery中的动画(animate)使用的，而jQuery.Deferred().promise()使用的范围更广，没看源码，不过猜一下，我觉得 jQuery(selector).promise()是jQuery在动画的时候对jQuery.Deferred().promise()的特殊实现(或者叫做功能封装)。

       然后再说一下jQuery.Deferred().promise()吧。它的一般用法为：

var defer= $.Deferred();

       $.when(defer.promise()).then<done|fail|....>(参数...)

       defer.resolve('传参数或留空');

       defer.reject('传参数或留空');

       defer.notify('传参数或留空');

       // ..... 其它信号

       实例请自己去看API页面。

       上面的defer是一个延迟对象(deferred)引用，表示这个对象的信号会在将来发出。

       接下来的 $.when(defer.promise()) 是指jQuery 要监视 defer的信号，收到信号后执行后面的then(或者done, fail或其它)的函数。而后面的defer.resolve<reject|notify>则是发出信号，通知jQuery延迟调用已经执行了，jQuery收到信号后，就去调用这个延迟的promise()后面的函数。

jQuery中的Deferred和promise 的区别

       一个promise就是一个由异步函数返回的对象。

       deferred对象就是jQuery的回调函数解决方案。

       总结

       jQuery

       的ajax

       就是返回一个promise

       对象，里面含有done(),

       fail()方法；

       deferred

       就是实现返回这个promise

       对象的过程。