jQuery的延迟对象(十一)
在前端这个领域里面,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的延迟对象(十一)的更多相关文章
- jQuery的延迟对象
之前看别人的demo,发现在延迟对象被resolve时要执行的代码,有时会写在deferred.then方法里执行,有时会写在deferred.done方法里执行. 这让对延迟对象一知半解的我非常困惑 ...
- jquery的2.0.3版本源码系列(7):3043行-3183行,deferred延迟对象,对异步的统一管理
目录 part1 deferred延迟对象 part2 when辅助方法 网盘源代码 链接: https://pan.baidu.com/s/1skAj8Jj 密码: izta part1 defe ...
- jquery源码解析:jQuery延迟对象Deferred(工具方法)详解2
请接着上一课继续看. $.Deferred()方法中,有两个对象,一个是deferred对象,一个是promise对象. promise对象有以下几个方法:state,always,then,prom ...
- jquery源码解析:jQuery延迟对象Deferred(工具方法)详解1
请先看上一课的回调对象.Deferred是通过extend添加到jQuery中的工具方法.如下所示: jQuery.extend({ Deferred: function( func ) { }, w ...
- jQuery源码02--(3043 , 3183) Deferred : 延迟对象 : 对异步的统一管理
//延迟对象 jQuery.extend({ Deferred: function( func ) { var tuples = [//resolve完成.reject未完成.notify进行中类似于 ...
- JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例
一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...
- JavaScript学习总结(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例
一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...
- jQuery的deferred对象学习
#copy { background-color: lightgreen; padding: 15px; margin: 10px } 一.deferred对象简介 deferred对象是jquery ...
- 延迟对象$q和供应商配置config
1.angular总的$q和jquery中的延迟对象很类似,用法也差不多 m1.controller('meng',['$scope','$q',function($scope,$q){ var df ...
随机推荐
- Zabbix自定义监控项(模板)
虽然Zabbix提供了很多的模板(简单理解为监控项的集合),在zabbix界面点击share按钮就可以直接跳到模板大全的官方网站,但是由于模板内的监控项数量太多不好梳理且各种模板质量参差不齐,还是建议 ...
- Opencv中图像height width X 轴 Y轴 rows cols之间的对应关系
这里做一个备忘录:
- 《HTTPS权威指南》读书笔记——SSL/TLS协议
记录协议(record protocol) 负责在传输连接上交换所有底层信息 每一条记录以短标头开始,标头包含记录内容的类型.协议版本和长度 握手协议(handshake protocol) 整个过程 ...
- 关于python的中国历年城市天气信息爬取
一.主题式网络爬虫设计方案(15分)1.主题式网络爬虫名称 关于python的中国城市天气网爬取 2.主题式网络爬虫爬取的内容与数据特征分析 爬取中国天气网各个城市每年各个月份的天气数据, 包括最高城 ...
- java之对象类型转换
基本数据类型之间的转换: 自动类型转换:小的数据类型可以自动转换成大的数据类型: 强制类型转换:可以把大的数据类型转换成小的数据类型:float = (float)32.0; public class ...
- C语言程序设计100例之(23):数列求和
例23 数列求和 问题描述 已知某数列前两项为2和3,其后继项根据前面最后两项的乘积,按下列规则生成: ① 若乘积为一位数,则该乘积即为数列的后继项: ② 若乘积为二位数,则该乘积的十位上的数字和个 ...
- SpringCloud微服务(01):Eureka组件,管理服务注册与发现
本文源码:GitHub·点这里 || GitEE·点这里 一.Eureka基本架构 1.Eureka简介 Eureka是Netflix开发的服务发现框架,本身是一个基于REST的服务,SpringCl ...
- Java题库——Chapter10 面向对象思考
1)You can declare two variables with the same name in ________. 1) _______ A)a method one as a forma ...
- 这十个Python常用库,学习Python的你必须要知道!
想知道Python取得如此巨大成功的原因吗?只要看看Python提供的大量库就知道了 包括原生库和第三方库.不过,有这么多Python库,有些库得不到应有的关注也就不足为奇了.此外,只在一个领域里的工 ...
- VMware虚拟机安装centos7
镜像下载地址:http://www.linuxdown.net/ 在vmware上开始安装CentOS系统,点击菜单新建虚拟机,进入如下图步骤进行操作. 接着进行自定义硬盘操作 最后虚拟机就创 ...