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

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 });
时间: 2024-08-01 09:32:05

JQuery的异步回调支持 - Promise、Deferred的相关文章

jQuery的异步回调对象Deffered分析

先来思考一个问题:一个需要耗时很长的操作比如setTimeout, ajax请求等,我们需要在延时操作后执行一个函数done. 比如: var wait = function(){ var tasks = function(){ alert("执行完毕!"); }; setTimeout(tasks,5000); }; 在wait执行完毕后,再执行done或者fail函数. 怎么做?当然,你可以在tasks函数中执行done() 或者 fail() ,但是不够优雅的实现.如果加入异步队

jquery.Deferred promise解决异步回调

我们先来看一下编写AJAX编码经常遇到的几个问题: 1.由于AJAX是异步的,所有依赖AJAX返回结果的代码必需写在AJAX回调函数中.这就不可避免地形成了嵌套,ajax等异步操作越多,嵌套层次就会越深,代码可读性就会越差. $.ajax({ url: url, data: dataObject, success: function(){ console.log("I depend on ajax result."); }, error: function(){} }); consol

Promise原理讲解 async+await应用(异步回调解决方案)

1.异步编程 1.1.回调函数 1.2 发布订阅 1.3 观察者模式 1.4 Promise 2.promise用法与原理 2.1 Promise.prototype.then() 2.2 Promise.prototype.catch() 2.3 Promise.all 2.4 Promise.race 2.5 Promise.resolve 2.6 Promise.reject 2.7 promise的一些扩展库 2.8 应用 async + await = generator + co 3

js异步回调Async/Await与Promise区别 新学习使用Async/Await

Promise,我们了解到promise是ES6为解决异步回调而生,避免出现这种回调地狱,那么为何又需要Async/Await呢?你是不是和我一样对Async/Await感兴趣以及想知道如何使用,下面一起来看看这篇文章:Async/Await替代Promise的6个理由. 什么是Async/Await? async/await是写异步代码的新方式,以前的方法有回调函数和Promise. async/await是基于Promise实现的,它不能用于普通的回调函数. async/await与Prom

【javascript】异步编年史,从“纯回调”到Promise

异步和分块——程序的分块执行 一开始学习javascript的时候, 我对异步的概念一脸懵逼, 因为当时百度了很多文章,但很多各种文章不负责任的把笼统的描述混杂在一起,让我对这个 JS中的重要概念难以理解, “异步是非阻塞的”, “Ajax执行是异步的”, "异步用来处理耗时操作"....  “可异步到底是什么?” 后来我发现,其实理解异步最主要的一点,就是记住: 我们的程序是分块执行的. 分成两块, 同步执行的凑一块, 异步执行的凑一块,搞完同步,再搞异步 废话不多说, 直接上图:

jQuery的回调支持

1.前言 jQuery提供了以下方法来创建Callbacks对象. jQuery.Callbacks(flags):根据创建的flags创建并返回Callsbacks对象,Callbacks对象代表一个回调函数列表. 得到回调函数列表之后,就接下来可以利用该回调函数列表来管理回调函数了. 2.例子 <!DOCTYPE html> <html> <head> <meta name="author" content="OwenWillia

异步编程解决方案之Promise/Deferred

Promise三种状态:未完成.完成态.失败态 var events = require('events'); var util = require('util'); var EventEmitter = events.EventEmitter; var Promise = function () { EventEmitter.call(this); } util.inherits(Promise, EventEmitter); Promise.prototype.then = function

JavaScript及其异步实现续:Promise让一切更简单

在写这篇文章之前,我参考了以下文章.所以我文中的例子都是精准的,而且有循可依.下面抛出例子的链接: Understanding JQuery.Deferred and PromiseDeferred and promise in jQuery Edit:在翻网站的时候,看到腾讯技术团队居然也刚写了一篇Promise的文章,加下链接,以作备忘. JavaScript Promise启示录 Deferred在JQuery1.5的版本被引进,这项功能的引进使JQuery变得更加强大,良好的异步支持,让

同步和异步回调

同步和异步回调 作者:havoc (原文地址:http://blog.ometer.com/2011/07/24/callbacks-synchronous-and-asynchronous/) 这里讲两个使用callback设计API的指南,并且添加到我的杂记posts about minor API design points中.我之前多次在不同的场合发起过关于"sync vs. async"回调的问题.这个问题着实困扰着API设计者和使用者. 最近,这个问题在我处理Hammers