在前端这个领域里面,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. centos7上安装jdk1.8

    我这里是使用的jdk1.8:由于vmware上的字体太小,所以我使用xShell链接linux系统进行操作的. 准备工作:使用xftp链接linux系统:然后创建个包将linux版本的jdk上传上去: ...

  2. Attach Files to Objects 将文件附加到对象

    In this lesson, you will learn how to attach file collections to business objects. For this purpose, ...

  3. Windows宏病毒利用

    背景: 最近忙的飞起,各种事情,不想吐槽,因为某些事情,还吃了口屎,啧啧啧..... 常见的钓鱼,社工基本技术都是这种,什么鱼叉,水坑,社工,投毒之类的,APT 攻击惯用伎俩. 那么今天主要利用Win ...

  4. django 做 migrate 时 表已存在的处理

    在开发web的时候,如果是以前已存在的项目,项目下载下来后,为了使用测试库的数据,会直接将整个测试库(如sqlite3)拿到本机来.这种情况下,如果执行的顺序不对,很容易在执行migrate的时候出现 ...

  5. springmvc+mybatis需要的jar包与详解

    https://www.cnblogs.com/luohengstudy/p/7772109.html

  6. 苹果 macOS 安装 Source Code Pro

    1. 下载     到 Source Code Pro 的 GitHub 官网下载:https://github.com/adobe-fonts/source-code-pro 点击 GitHub 中 ...

  7. 【使用篇二】SpringBoot使用Druid作为数据源(19)

    Druid是一个关系型数据库连接池,它是阿里巴巴的一个开源项目.Druid支持所有JDBC兼容数据库,包括了Oracle.MySQL.PostgreSQL.SQL Server.H2等.Druid在监 ...

  8. 剑指Offer-45.扑克牌顺子(C++/Java)

    题目: LL今天心情特别好,因为他去买了一副扑克牌,发现里面居然有2个大王,2个小王(一副牌原本是54张^_^)...他随机从中抽出了5张牌,想测测自己的手气,看看能不能抽到顺子,如果抽到的话,他决定 ...

  9. filter,map,reduce三个数组高阶函数的使用

    filter ,map ,reduce三个高阶函数的使用 普通方法解决数据问题 const nums1= [10,20,111,222,444,40,50] // 需求1.取出小于100的数字 // ...

  10. opencv---(腐蚀、膨胀、边缘检测、轮廓检索、凸包、多边形拟合)

    一.腐蚀(Erode) 取符合模板的点, 用区域最小值代替中心位置值(锚点) 作用: 平滑对象边缘.弱化对象之间的连接. opencv 中相关函数:(erode) // C++ /** shape: ...