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 ...
随机推荐
- C#基础之事件(2)
在“C#基础之事件(1)”中已对事件有了一个大概,这里对事件进行更深入的学习. 本节按以下内容展开: 1.事件拥有者与事件响应者的关系: 2.事件订阅的多种写法: 3.事件的订阅和取消订阅: 4.多事 ...
- Geoserver发布服务
Geoserver发布服务的数据源很多样化 在数据存储中选择要发布的数据来源,这里以POSTGIS为例 1. 2.如果成功,就会读取出库里面的表,你可以在这里添加图层,发布服务 3.点击发布,进行服务 ...
- 关于Fastjson 1.2.24 反序列化导致任意命令执行漏洞
环境搭建: sudo apt install docker.io git clone https://github.com/vulhub/vulhub.git cd vulhub fastjson 1 ...
- cesium 圆圈警戒扫描(附源码下载)
前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...
- AndroidStudio集成.so遇见的问题:关于java.lang.UnsatisfiedLinkError: Native method not found
我调试的是串口程序,程序中需要继承.so文件,AndroidStudio中集成.so文件的方法是将存放.so的文件夹(通常这个文件夹名字是:armeabi)拷贝到app的libs文件夹中,然后在app ...
- SpringMVC自学笔记
1.<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> 通过ser ...
- [主动学习--查询策略] 01 Core-set
符号定义 主动学习每一次迭代选择的样本数量为一个 budget 训练集中初始无标签数据集记为 unlabeled data,\(\bm{u}^0\) 训练集中初始有标签数据集记为 initial la ...
- laravel中间件的使用
简介HTTP 中间件提供了为过滤进入应用的 HTTP 请求提供了一套便利的机制.例如,Laravel 内置了一个中间件来验证用户是否经过授权,如果用户没有经过授权,中间件会将用户重定向到登录页面,否则 ...
- Java描述设计模式(01):单例模式
本文源码:GitHub·点这里 || GitEE·点这里 一.单例模式 1.概念图解 单例设计模式定义:确保这个类只有一个实例,并且自动的实例化向系统提供这个对象. 2.样例代码 package co ...
- 工作笔记 之 Linux服务搭建
No.1 linux环境下安装nginx步骤 Nginx (engine x) 是一款轻量级的Web 服务器.反向代理服务器.电子邮件(IMAP/POP3)代理服务器,在BSD-like 协议下发行. ...