Angular - - $q 承诺与延迟
$q
一个帮助处理异步执行函数的服务。当他们做完处理时,使用它们的返回值(或异常)。
受 Kris Kowa’s Q 的启发,这是一个实现promise/deferred对象的启用。
$q的两种方式---这是一个更类似于Kris Kowal Q或jQuery的递延实现,另一种在一定程度上类似的ES6承诺。
Deferred Api
一个被$q.defer()调用的deferred的新实例。
deferred对象的目的是暴露相关承诺实例,以及APIs被执行的成功或不成功情况,以及任务的状态。
方法:
resolve(value):根据value以解决派生的promise。如果值是通过$q.reject构造的rejection 对象,该promise将被拒绝。
reject(reason):根据reason以拒绝派生的promise。这相当通过 $q.reject构造的rejection 对象来解决。
notify(value):在 promise 被执行的过程中提供状态更新情况。这可能会被多次调用,在promise是被解决还是被拒绝之前。
属性:
promise:承诺,与这个延迟相关的承诺对象。
Promise Api
当一个deferred实例被创建时,一个promise实例被创建,并且可以通过调用deferred.promise检索。Promise对象的目的是当它完成后允许需要的地方获得延迟任务的结果。
方法:
then(successCallback,errorCallback,notifyCallback);
无论什么时候,promise是已经(将要)被解决或拒绝,只要结果是可用的,就调用一个成功/错误的回调异步。回调函数带着一个参数被调用:解决的结果或拒绝的原因。此外,在承诺被解决或被拒绝之前,通知回调可能被调用0或多次用来提供一个指示进度。
这个方法返回被successCallback/errorCallback的解决或拒绝的返回值作为一个新的承诺(除非返回值是个 promise,在承诺链的承诺和值都被解决的情况下)。它还将通过notifycallback方法的返回值进行通知。promise 不能从notifyCallback方法得到解决或拒绝 。
catch(errorCallback);
promise.then(null, errorCallback) 的快捷方式。
finally(callback,notifyCallback);
允许你观察一个承诺的解决或拒绝,但这样做不能修改最后的值。这可用于promise不论是被解决或拒绝后释放资源或做一些清理。
链式承诺
因为调用本次promise的方法将会返回一个新的延生的promise,它很容易创建一个承诺链:
promise = promise.then(function(result){ return result+1; });
当一个承诺解决另一个承诺(这将推迟其进一步的解决)可能创建一个任何长度的链。它可能在链中的任何处暂停/推迟承诺。这使得它可以像$http的响应拦截这类强大的API。
Kris Kowal’s Q和$q的不同
以下是两个主要的不同:
在Angular里,$q和$rootScope.Scope Scope模型的观察机制集成,这意味着更快的将解决/拒绝的结果传播到你的model和避免不必要的浏览器重新渲染(这将导致ui的闪烁)。
Q比$q有更多的特性,但这是以字节为代价的。$q是小版本的,但包含所有常见的异步任务所重要的功能。
依赖:$rootScope
使用:$q(resolver);
方法:
defer();
创建一个deferred对象,它代表一个将在将来完成的任务。返回一个deferred的新实例。
reject(reason);
创建一个由指定的理由拒绝的承诺。在承诺链中,这个api将被用于承诺的拒绝。如果你正在处理一个承诺链的最后一个承诺,那么你不需要担心它。
reason:常数,消息,异常或一个对象表示拒绝原因。
返回一个已经根据拒绝原因解决了的承诺。
when(value);
将一个对象或者一个值或者一个第三方承诺包装进$q承诺。当你处理一个可能是承诺或可能不是承诺或承诺来自一个不可信的来源的对象。
value:值或者承诺。
返回一个承诺。
resolve(value);
when的别名,为了与ES6保持一致。
all(promises);
当所有承诺都得到解决后,在一个单一的承诺里集合多个被解决的承诺。
promises:承诺的数组或者哈希。
返回一个将被结合一个数组/哈希或者值解决的单一的承诺,每个值在相同索引/键的数组/哈希承诺对应相对承诺,如果有任何承诺被拒绝,这将导致承诺被以相同的拒绝值拒绝。
使用代码:
(function () {
angular.module('Demo', [])
.controller('testCtrl', ["$q", testCtrl]);
function testCtrl($q) {
var fn = function (value) {
var defer = $q.defer();
if (value == "Hello") {
defer.resolve("Hello World");
} else {
defer.reject("hello world");
}
return defer.promise;
};
var promise = fn("Hello");
promise.then(function (v) {
console.log("resolved with " + v);
}, function (r) {
console.log("rejected with " + r);
});//Hello World
var anotherPromise = fn();
anotherPromise.then(function (v) {
console.log("resolved with " + v);
}, function (r) {
console.log("rejected with " + r);
});//hello world
}
}());
承诺链:
(function () {
angular.module('Demo', [])
.controller('testCtrl', ["$q", testCtrl]);
function testCtrl($q) {
var fnA = function (value) {
var defer = $q.defer();
if (value == "Hello") {
defer.resolve("Hello World -- fnA");
} else {
defer.reject("hello world -- fnA");
}
return defer.promise;
};
var fnB = function (value) {
var defer = $q.defer();
if (value == "Hello") {
defer.resolve("Hello World -- fnB");
} else {
defer.reject("hello world -- fnB");
}
return defer.promise;
};
var promise = fnA("Hello");
promise.then(function (v) {
console.log("resolved with " + v);//Hello World -- fnA
return fnB();
}, function (r) {
console.log("rejected with " + r);
return fnB("Hello");
}).then(function (v) {
console.log("resolved with " + v);
}, function (r) {
console.log("rejected with " + r);//hello world -- fnB
})
}
}());
.when():
(function () {
angular.module('Demo', [])
.controller('testCtrl', ["$q", testCtrl]);
function testCtrl($q) {
var obj = { value: "Hello World" };
$q.when(obj.value).then(function (v) {
console.log(v);// Hello World
obj = { text: "hello world" }
return $q.when(obj.text);
}).then(function (v) {
console.log(v);// hello world
})
}
}());
.all():
(function () {
angular.module('Demo', [])
.controller('testCtrl', ["$q", testCtrl]);
function testCtrl($q) {
var fnA = function (value) {
var defer = $q.defer();
if (value == "Hello") {
defer.resolve("Hello World -- fnA");
} else {
defer.reject("hello world -- fnA");
}
return defer.promise;
};
var fnB = function (value) {
var defer = $q.defer();
if (value == "Hello") {
defer.resolve("Hello World -- fnB");
} else {
defer.reject("hello world -- fnB");
}
return defer.promise;
};
var promiseA = fnA("Hello").then(function (v) {
console.log("resolved with " + v);
return fnB();
}, function (r) {
console.log("rejected with " + r);
return fnB("Hello");
});
var promiseB = fnB().then(function (v) {
console.log("resolved with " + v);
}, function (r) {
console.log("rejected with " + r);
});
var promises = [promiseA, promiseB];
$q.all(promises);
/* result:
** resolved with Hello World -- fnA
** rejected with hello world -- fnB
*/
}
}());
关于$q,野兽目前的理解也就这些,用的话也是看情况着用,更多时候觉得它就像语法糖一般,只是省了N多嵌套,但不得不说这个语法糖让代码可读性和 整洁性好了很多。但野兽觉得$q更多的好处是在promise和deferred,创建个承诺,在后面需要的地方再回来解决这个承诺。同时也推荐一篇关于 描述$q的文章,雪狼大叔写的,url是:http://www.ngnice.com/posts/126ee9cf6ddb68
Angular - - $q 承诺与延迟的更多相关文章
- AngularJs $q 承诺与延迟
$q 一个帮助处理异步执行函数的服务.当他们做完处理时,使用它们的返回值(或异常). 受 Kris Kowa’s Q 的启发,这是一个实现promise/deferred对象的启用. $q的两种方式- ...
- angular的$q,defer,promise
$q是Angular的一种内置服务,它可以使你异步地执行函数,并且当函数执行完成时它允许你使用函数的返回值(或异常). 官网:http://docs.angularjs.cn/api/ng/servi ...
- angularjs 缓存 $q
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...
- 深入浅出HTTP协议(WEB开发和面试必备)
1. 基础概念篇 a.简介 HTTP是Hyper Text Transfer Protocol(超文本传输协议)的缩写.它的发展是万维网协会(World Wide Web Consortium)和 ...
- 深入理解http/https协议
深入理解HTTP协议(转) http协议学习系列 1. 基础概念篇 1.1 介绍 HTTP是Hyper Text Transfer Protocol(超文本传输协议)的缩写.它的发展是万维网协会(Wo ...
- 转载和积累系列 - 深入理解HTTP协议
深入理解HTTP协议 1. 基础概念篇 1.1 介绍 HTTP是Hyper Text Transfer Protocol(超文本传输协议)的缩写.它的发展是万维网协会(World Wide Web C ...
- Linux常用命令(三)
1.top 说明:即时显示 process 的动态 语法格式:top [-] [d delay] [q] [c] [S] [s] [i] [n] [b]基本参数:d : 改变显示的更新速度,或是在交谈 ...
- http协议学习系列
深入理解HTTP协议(转) http://www.blogjava.net/zjusuyong/articles/304788.html http协议学习系列 1. 基础概念篇 1.1 介绍 H ...
- 深入理解HTTP协议、HTTP协议原理分析【转】
转自:http://blog.csdn.net/lmh12506/article/details/7794512 版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[-] 基础概念篇 ...
随机推荐
- CentOS查询 杀死进程
ps aux | grep XXX 查询进程 ps a 显示现行终端机下的所有程序,包括其他用户的程序. ps -A 显示所有程序. ps c 列出程序时,显示每个程序真正的指令名称,而不包含路径,参 ...
- 兼容性,float
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 解决Ubuntu系统中文乱码显示问题,终端打开文件及查看目录
解决Ubuntu系统中文乱码显示问题 [日期:2014-02-20] 来源:Linux社区 作者:njchenyi [字体:大 中 小] 我是先安装了Ubuntu 12.04 Server,然后 ...
- Linux:网络yum源设置
网络yum源,最大的网易(163)算是一个,无论是速度还是软件版本,都非常的不错,将yum源设置为163yum,可以提升软件包安装和更新的速度,同时避免一些常见软件版本无法找到.具体设置方法如下: 1 ...
- python之路:进阶篇 内置函数
li = [11, 22, 33] news = map( li = [100, 2200, 3300] news = map( [13, 24, 35] [11, 11, 11] [22, 4 ...
- /system改成可写
读写: mount -o remount,rw /dev/block/mtdblock0 /system 只读mount -o remount,ro /dev/block/mtdblock0 /sys ...
- CentOS 7 x64 docker 使用点滴
CentOS 7 安装 docker yum search docker 查看是否 有docker包 yum info docker 版本为1.3.2 yum -y install docker ...
- [iOS]C语言技术视频-06-程序循环结构(for{})
下载地址: 链接: http://pan.baidu.com/s/1dD11Zwt 密码: rke9
- MYSQL同步--主从同步问题集锦
1 同步停止,报错误: Could not find first log file name in binary log index file 数据库主从出错: Slave_IO_Running: ...
- Linux命令 理解
RPM常用命令参数列表 1.安装一个包 # rpm -ivh 2.升级一个包 # rpm -Uvh [注意U一定要大写] -i 安装 -U 升线安装 -h 以#显示安装进度 -v 显示附加 ...