jQuery通过deferred对象管理ajax异步

前端之家收集整理的这篇文章主要介绍了jQuery通过deferred对象管理ajax异步前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

今天跟大家分享一个jquery中的对象-deferred。其实从jQuery 1.5.0版本开始引入的一个新功能----deferred对象。不过可能在实际开发过程中用到的并不多,所以没有太在意。

开发网站的过程中,我们经常遇到某些耗时很长的javascript操作。其中,既有异步的操作(比如ajax读取服务器数据),也有同步的操作(比如遍历一个大型数组),它们都不是立即能得到结果的。

通常的做法是,为它们指定回调函数(callback)。即事先规定,一旦它们运行结束,应该调用哪些函数

但是,在回调函数方面,jQuery的功能非常弱。为了改变这一点,jQuery开发团队就设计了deferred对象。

简单说,deferred对象就是jQuery的回调函数解决方案。在英语中,defer的意思是"延迟",所以deferred对象的含义就是"延迟"到未来某个点再执行。

这里先不说deferred的概念,我们先看一个例子。

还记得初学的时候,遇到一个实例,先是要ajax请求一个接口(a.json),从返回的数据中获得一个id1值。然后再请求一个接口(b.json)获得id2,最后需要对这两个id值同时进行操作。

错误解法

那个时候初学,首先想到的方案(现在想想,很傻很天真...)

这个大家应该都知道。现在在编辑器敲入ajax,然后回车,提示的ajax语法结构就是这样链式的写法。

done函数就是ajax请求成功的回到函数

fail函数就是ajax请求失败的回调函数

使用deferred的解决方法

值得一提的是,上面代码中done函数的参数,对应的是前面每一个ajax请求返回的数据

上面的代码中,用到了deferred对象的when方法

它的描述是:

提供一种方法来执行一个或多个对象的回调函数

这里的ajax1和ajax2就是deferred对象,done和fail就是回调函数。上面代码的意思是:

只有当两个ajax请求都成功返回数据时,执行done函数;只要有一个请求不成功,就执行fail函数

另外值得一提的是:$.when方法的参数,只支持deferred对象,而ajax返回的就是deferred对象。`

这就已经实现了上面的需求了。请求两个接口,获得两个数据,都成功时,对这两个数据同时进行处理。而且这种链式写法,让读者一目了然,而且便于维护扩展。

deferred方法汇总

提到的方法

$.Deferred():生成一个deferred对象。

$.when() 为多个操作指定回调函数

deferred.done():指定操作成功后的回调函数

deferred.fail():指定操作失败后的回调函数

未提到的方法

•deferred.resolve()方法和deferred.reject()方法

deferred对象执行回调函数之前会有一个执行状态的存在,执行状态一共有三种———未完成、已完成和已失败。

未完成状态,则会继续等待,或者执行progress()指定的回调函数

已完成状态,则会执行done()方法指定的回调函数

已失败状态,则会执行fail()方法指定的回调函数

所以这里的deferred.resolve()方法就是手动将deferred对象的状态改为已完成,继而执行done方法; deferred.reject()方法就是手动将状态改为已失败,继而执行fail方法

下面来看一个例子:

Failed");   });

结果:等待5秒钟,先弹出“succeed”,在弹出“执行完毕!”。

分析一下代码执行过程:

$.when()里面的参数是wait函数,也就是一个deferred对象,所以可以继续执行setTimeout函数,等待5s,执行tasks函数,然后手动改变了状态为“已完成”,所以执行done方法,弹出“succeed”,然后弹出“执行完毕!”。

deferred.then():有时为了省事,可以把done()和fail()合在一起写,这就是then()方法

当then方法只有一个参数时,相当于done方法。当有两个参数时,第一个相当于done方法,第二个相当于fail方法

总结

deferred对象通过对一个ajax请求的各种回调函数的控制,让jquery写ajax变的简单、容易维护、容易扩展。

以上所述是小编给大家介绍的jQuery通过deferred对象管理ajax异步的相关知识。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文链接:https://www.f2er.com/ajax/48598.html

猜你在找的Ajax相关文章