JQuery的异步回调支持 - Promise、Deferred

简介: 1、Deferred对象: 一般在函数内部进行声明,并在运行过程中改变其状态,例如成功或失败,最终返回Promise对象用于状态监听。 主要方法: Deferred.resolve(param...) :执行成功,将会触发Promise对象的done回调方法。

1、Deferred对象:

一般在函数内部进行声明,并在运行过程中改变其状态,例如成功或失败,最终返回Promise对象用于状态监听。

主要方法:

Deferred.resolve(param...) :执行成功,将会触发Promise对象的done回调方法。
Deferred.reject(param...) :执行失败,将会触发Promise对象的fail回调方法。
Deferred.notify(param...) :正在执行,将会触发Promise对象的progress回调方法。
Deferred.promise() :返回Promise对象实例。

其他说明:

使用 $.Deferred() 即可声明一个Deferred对象。

2、Promise对象:

可以将其看作Deferred的一个实例,在函数状态改变时将会触发Promise对象的相应回调方法。

主要方法:

Promise.done(callback) :执行成功时的回调方法。
Promise.fail(callback) :执行失败时的回调方法。
Promise.progress(callback) :正在执行时的回调方法。
Promise.always(callback) :只要Deferred的状态发生改变就会触发always方法,类似于finally。
Promise.then(doneCallback, failCallback, progressCallback) :另外一种定义回调函数的方式。

其他说明:

Promise的所有方法均返回Promise对象,因此可以链式调用,比如:Promise.done(funA).fail(funB).always(funC)
JQuery的Ajax方法默认返回Promise对象,因此可以直接使用Promise的各种回调方法。

3、代码示例:

 1 //-- 全局变量 ---------------------------
 2 var flagA = flagB = flagC = "";
 3 
 4 //-- Fun : waitA ---------------------------
 5 var waitA = function(ms){
 6     if(!ms) ms = 2000;
 7     var def = $.Deferred();
 8     setTimeout( function(){ flagA = "waitA执行成功"; def.resolve(flagA); }, ms);
 9     return def.promise();
10 };
11 //-- Fun : waitB ---------------------------
12 var waitB = function(ms){
13     if(!ms) ms = 2000;
14     var def = $.Deferred();
15     setTimeout( function(){ flagB = "waitB执行失败"; def.reject(flagB); }, ms);
16     return def.promise();
17 };
18 //-- Fun : waitC ---------------------------
19 var waitC = function(ms){
20     if(!ms) ms = 2000;
21     var def = $.Deferred();
22     setTimeout( function(){ flagC = "waitC执行失败"; def.reject(flagC); }, ms);
23     return def.promise();
24 };
25 
26 //-- 调用方式一:
27 waitA(2000).done(function(msg){
28     console.info(msg);
29 }).fail(function(msg){
30     console.info(msg);
31 }).always(function(msg){
32     console.info(msg);
33 });
34 
35 //-- 调用方式二:
36 waitA(2000).then(function(msg){
37     console.info(msg);
38 }, function(msg){
39     console.info(msg);
40 });
41 
42 //--调用方式三:
43 $.when(waitA(2000)).then(function(msg){
44     console.info(msg);
45 }, function(msg){
46     console.info(msg);
47 });
48 
49 //--调用方式四:按顺序执行三个函数
50 $.when(waitA(2000)).then(waitB).then(waitC);
51 //或者:
52 $.when(waitA(2000)).then(function(msg){
53     console.info(msg);
54     waitB(2000).then(function(msg){
55         console.info(msg);
56         waitC(2000).then(function(msg){
57             console.info(msg);
58         });
59     });
60 });
61 
62 //--调用方式五:同时执行三个函数
63 $.when(waitA(1000), waitB(2000), waitC(3000)).then(function(mes){
64     console.info("全部执行成功!" + mes);
65 }, function(mes){
66     console.warn("未全部执行成功,其中:" + mes);
67 });

 


宠辱不惊,看庭前花开花落;去留无意,望天上云卷云舒
目录
相关文章
|
1月前
|
前端开发 JavaScript
如何使用 Promise 处理异步并发操作?
通过使用 `Promise.all()` 和 `Promise.race()` 方法,可以灵活地处理各种异步并发操作,根据不同的业务需求选择合适的方法来提高代码的性能和效率,同时也使异步代码的逻辑更加清晰和易于维护。
|
1月前
|
存储 前端开发
除了 Promise.all(),还有哪些方法可以处理异步并发操作?
在上述示例中,`concurrentPromises` 函数接受一个Promise数组和最大并发数作为参数,通过手动控制并发执行的Promise数量,实现了对异步操作的并发控制,并在所有Promise完成后返回结果数组。
|
1月前
|
前端开发 数据处理
如何使用 Promise.all() 处理异步并发操作?
使用 `Promise.all()` 可以方便地处理多个异步并发操作,提高代码的执行效率和可读性,同时通过统一的 `.catch()` 方法能够有效地处理异步操作中的错误,确保程序的稳定性。
|
1月前
|
JSON 前端开发 JavaScript
在 JavaScript 中,如何使用 Promise 处理异步操作?
通过以上方式,可以使用Promise来有效地处理各种异步操作,使异步代码更加清晰、易读和易于维护,避免了回调地狱的问题,提高了代码的质量和可维护性。
|
1月前
|
前端开发 JavaScript 开发者
用 Promise 处理异步操作的优势是什么?
综上所述,使用Promise处理异步操作能够有效地解决传统回调函数带来的诸多问题,提高代码的质量、可读性、可维护性和可扩展性,是JavaScript中进行异步编程的重要工具和技术。
|
2月前
|
前端开发 JavaScript UED
深入了解JavaScript异步编程:回调、Promise与async/await
【10月更文挑战第11天】深入了解JavaScript异步编程:回调、Promise与async/await
24 0
|
3月前
|
前端开发 JavaScript
解决异步问题,教你如何写出优雅的promise和async/await,告别callback回调地狱!
该文章教授了如何使用Promise和async/await来解决异步编程问题,从而避免回调地狱,使代码更加清晰和易于管理。
解决异步问题,教你如何写出优雅的promise和async/await,告别callback回调地狱!
|
JSON 前端开发 数据格式
MVC验证08-jQuery异步验证
原文:MVC验证08-jQuery异步验证 本文主要体验通过jQuery异步验证。 在很多的教材和案例中,MVC验证都是通过提交表单进行的。通过提交表单,可以很容易获得验证出错信息。因为,无论是客户端验证还是服务端验证,总能找到与Model属性或验证特性对应的html元素和属性,并把错误信息显示出来。
850 0
|
8天前
|
JavaScript 前端开发
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后,子菜单以滑动的方式依次展开
46 21
|
9天前
|
JavaScript
jquery图片和pdf文件预览插件
EZView.js是一款jquery图片和pdf文件预览插件。EZView.js可以为图片和pdf格式文件生成在线预览效果。支持的文件格式有pdf、jpg、 png、jpeg、gif。
41 16