在前端这个领域里面,ajax请求非常常见。

// 前提引入jquery

$.ajax({
type: 'get',
url: '/path/to/data',
success: function (response) { },
error: function (errMsg) { }
})

上面这段代码中的success和error被称为回调函数。基于js异步IO的特点,代码的意思就是在ajax请求成功之后,执行success函数,而在ajax失败时,执行error函数。

然而在有些情况下,业务逻辑可能需要我们产生多个success状态下的回调函数,或者多个ajax请求同时发送,全部success状态后执行回调,这样的方法就显得有些捉襟见肘。

 单次ajax请求有多个回调响应

$.ajax({
type: 'get',
url: '/path/to/data',
success: function (response) {
// todo successCallback2(response);
successCallback3(response);
}
})

继续使用上面的写法,就会让回调进行嵌套,如果需要在successCallback2完成后继续回调,就要一层一层的嵌套。代码不是纵向发展,而是横向发展,这就是js中的回调地狱。

当然,jquery团队也发现了这个问题,在2011年,也就是jquery 1.5版本之后,jQuery.Deferred对象为解决这类问题应运而出。

在jquery 1.5 版本之后,ajax请求的内部实现被重写。$.ajax方法返回的不再是一个jqXHR对象,而是一个Deferred对象。

var fetchData = function (url) {
return $.ajax({
type: 'get',
url: url
});
}

这样一次请求的内容就已经完成,$.ajax返回一个$.Deferred对象,那么我们就可以使用$.Deferred对象的api进行一些异步操作。

对于每一个$.Deferred对象来说,实例有多个方法,其中done方法代表异步完成时执行的方法,fail代表异步失败时执行的方法,这两个方法同时仍旧返回一个$.Deferred对象的实例。

 1. done(doneCallbacks[,doneCallbacks])

当请求成功时调用一个函数或者数组函数。

该参数可以是一个函数或一个函数的数组。当请求成功时,doneCallbacks被调用。回调执行是依照他们添加的顺序。

$.get("test.php").done(function() {
alert("$.get succeeded");
});

2. fail(failCallbacks[,failCallbacks])

当请求失败时调用一个函数或者数组函数。

该参数可以是一个函数或一个函数的数组。当请求失败时,doneCallbacks被调用。回调执行是依照他们添加的顺序。

$.get("test.php")
.done(function(){ alert("$.get succeeded"); })//延迟成功
.fail(function(){ alert("$.get failed!"); });//延迟失败

3. then(doneFilter [, failFilter ] )

doneCallbacks: 一个函数或函数数组,当延迟成功时调用。

failCallbacks: 一个函数或函数数组,当延迟失败时调用。

$.get("test.php").then(
function(){ alert("$.get succeeded"); },
function(){ alert("$.get failed!"); }
);

4. always(alwaysCallbacks,[alwaysCallbacks])

无论是成功还是失败都进行回调

$.get("test.php").always( function() {
alert("$.get completed with success or error callback arguments");
} );

jQuery的延迟对象(十一)的更多相关文章

  1. jQuery的延迟对象

    之前看别人的demo,发现在延迟对象被resolve时要执行的代码,有时会写在deferred.then方法里执行,有时会写在deferred.done方法里执行. 这让对延迟对象一知半解的我非常困惑 ...

  2. jquery的2.0.3版本源码系列(7):3043行-3183行,deferred延迟对象,对异步的统一管理

    目录 part1 deferred延迟对象 part2  when辅助方法 网盘源代码 链接: https://pan.baidu.com/s/1skAj8Jj 密码: izta part1 defe ...

  3. jquery源码解析:jQuery延迟对象Deferred(工具方法)详解2

    请接着上一课继续看. $.Deferred()方法中,有两个对象,一个是deferred对象,一个是promise对象. promise对象有以下几个方法:state,always,then,prom ...

  4. jquery源码解析:jQuery延迟对象Deferred(工具方法)详解1

    请先看上一课的回调对象.Deferred是通过extend添加到jQuery中的工具方法.如下所示: jQuery.extend({ Deferred: function( func ) { }, w ...

  5. jQuery源码02--(3043 , 3183) Deferred : 延迟对象 : 对异步的统一管理

    //延迟对象 jQuery.extend({ Deferred: function( func ) { var tuples = [//resolve完成.reject未完成.notify进行中类似于 ...

  6. JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  7. JavaScript学习总结(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  8. jQuery的deferred对象学习

    #copy { background-color: lightgreen; padding: 15px; margin: 10px } 一.deferred对象简介 deferred对象是jquery ...

  9. 延迟对象$q和供应商配置config

    1.angular总的$q和jquery中的延迟对象很类似,用法也差不多 m1.controller('meng',['$scope','$q',function($scope,$q){ var df ...

随机推荐

  1. Python-xlwt库的基本使用

    安装xlwt库 pip install xlwt 基本使用 ①创建工作簿 wa = xlwt.Workbook() ②添加工作表 添加“class”工作表 b = wa.add_sheet('clas ...

  2. 为什么学习Python?

    互联网高速发展的今天,很荣幸能够接触计算机这个专业,成为一名程序猿小白,本科期间学习了C.C++.Java.Pthon.C#,每门语言都了解那么一点,学的很杂,刚好遇到大学毕业的这个暑期,在继续读研之 ...

  3. 【产品】移动应用监控平台调研——bugly&fabric

    产品定位 腾讯bugly和fabric不仅仅是可以帮助运营人员分析用户.优化推广的数据分析平台,也是移动开发者的异常上报平台和应用更新平台.可以同时为公司产品运营和开发人员提供服务. 产品功能 fab ...

  4. HTML入门(转义字符、行内样式和块级元素、定位、锚点、跑马灯标签、图片标签、表格标签的讲解)

    一.转义字符由特殊字符包裹的文本 会当做标签去解析 对应不换行空格 对应全角空格 em是字体排印学的计量单位,相当于当前指定的点数.其占据的宽度正好是1个中文宽度,而且基本上不受字体影响.<对应 ...

  5. NETGEAR R7800路由器TFTP刷回原厂固件方法

    前几天因图新鲜将用了一年的R7800刷为dd-wrt固件,结果发现信号覆盖和网络速率相对于原厂固件还有一些差距. 然后从dd-wrt固件刷回原厂,具体操作过程如下: 1.到NETGEAR官网[支持]模 ...

  6. Abusing SUDO Advance for Linux Privilege Escalation

    Index What is SUDO? Scenario. Sudoer FIle Syntax. Exploiting SUDO zip tar strace tcpdump nmap scp ex ...

  7. Docker 底层技术与端口映射

    容器底层实现技术  1.cgroup 实现了资源的限额:CPU,内存,硬盘 cgroup使用  docker run -d -m 100M httpd 2.namespace 实现了资源隔离 name ...

  8. ORA-27090: Unable to reserve kernel resources for asynchronous disk I/O

    2019-08-19T09:27:33.225584+08:00Slave encountered ORA-27090 exception during crash recoveryRecovery ...

  9. application context not configured for this file于spring框架使用中的原因

    spring配置文件中时常会出现这个提示,翻译过来大概意思就是没有配置该文件到项目中 于是进入到Project Structure中查看 可以很明显的看到下面有个感叹号,大概意思是下面的文件没有匹配 ...

  10. Sass、LESS 和 Stylus各有千秋

    废话不多说直接上连接  为您详细比较三个 CSS 预处理器(框架):Sass.LESS 和 Stylus