angular的异步处理$q的使用(promise)
Angular中的promise:
Promise是一种异步方式处理值的方法。代表了一个函数最 终可能的返回值或者抛出的异常
在之前,通常都是使用闭包或者回调来响应非同步的有意义数据
使用promise的目的是:获得功能组合和错误冒泡(error bubbling)能力的同时,保持 代码异步运行的能力。
$q的api:
defer():用来生成一个延迟对象 var defer =$q.defer();
reject():参数接收错误消息,相当于在回调函数中抛出一个异常,然后在下一个then中调用错误的回调函数。
all():参数接收为一个promise数组,返回一个新的单一promise对象,当这些promise对象对应defer对象全部解决这个单一promise对象才会解决,当这些promise对象中有一个被reject了,这个单一promise同样的被reject了
when(): 接收第一个参数为一个任意值或者是一个promise对象,其他 3个同promise的then方法,返回值为一个promise对象。第一个参数若不是promise对象则直接运行success回调且消息为这个对象,若为promise那么返回的promise其实就是对这个promise类型的参数的一个包装而已,被传入的这个promise对应的defer发 送的消息,会被我们when函数返回的promise对象所接收到
<script>
var app=angular.module("myApp",[])
.controller("myCtrl",["$scope","$q",function(s,$q){
var promise = $q.when(1, function(num) {//参数不是promise,直接执行success回调且消息为这个对象
console.log("s" + num);
}, function() {
console.log("e");
});
var defer1 = $q.defer();
var promise1 = defer1.promise;
var promise2 = $q.when(promise1, function(num) {
console.log("s" + num);
}, function() {
console.log("e");
});
defer1.reject(1);
}]);
</script>
结果:e,s1
Demo2:
var defer = $q.defer();
var promise = defer.promise;
promise.then(function() {
return $q.reject("success error");
}, function() {
return $q.reject("error error");
}).then(function(info) {
document.write("s:" + info + "<br/>");
}, function(info) {
document.write("e:" + info + "<br/>");
});
defer.reject(1);//结果:e:error error
defer.resolve(1);//结果:e:success error
解释:reject():参数接收错误消息,相当于在回调函数中抛出一个异常,然后在下一个then中调用错误的回调函数。
demo2:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<meta charset=utf-8 />
<script src="http://code.angularjs.org/1.2.3/angular.min.js"></script>
<title>JS Bin</title>
</head>
<body ng-controller="myCtrl">
<script>
var app=angular.module("myApp",[])
.controller("myCtrl",["$scope","$q",function(s,$q){
var defer1 = $q.defer();
var promise1 = defer1.promise;
promise1.then(function(num) {
console.log("success" + num);
},
function(num) {
console.log("error" + num);
});
var defer2 = $q.defer();
var promise2 = defer2.promise;
promise2.then(function(num) {
console.log("success" + num);
},
function(num) {
console.log("error" + num); });
var promise3 = $q.all([promise1, promise2]);
promise3.then(function(num) {
console.log(num );
}, function(num) {
console.log( num);
});
//方式1
defer1.resolve(1);
defer2.resolve(2);
//方式2
//defer1.reject(1);
}]);
</script>
</body>
</html>
结果:success1,success2, [1,2]
使用内置的$q服务,deferred API中提供了 一些方法。
(1) 创建一个deferred对象:var deferred = $q.defer();
deferred对象暴露了三个方法,以及一个可以用于处理promise的promise属性
deferred.resolve(value):执行deferred promise ,
deferred.resolve({name:’Ari’,username:’@auser’ });
deferred.reject(reason):拒接的defferred promise
deferred.reject(“cant’t update user”);<===> deferred.resolve($q.reject("Can't update user"));
deferred.notify(value): 用promise的执行状态来进行响应
给你一个demo自己去体会:
angular.module('myApp', [])
.factory('GithubService', [ '$q', '$http', function($q, $http) {
var getPullRequests = function() {
var deferred = $q.defer(); // 从Github获取打开的angularjs pull请求列表
$http.get('https://api.github.com/repos/angular/angular.js/pulls')
.success(function(data){ deferred.resolve(data); })
.error(function(reason){ deferred.reject(reason); })
return deferred.promise;
}
return { // 返回工厂对象
getPullRequests: getPullRequests
};
}]);
promise对象可以通过defer.promise获取,下面是promise对象的api:
如何创建一个promise:
var
promise = defer.promise;
promise对象可以通过defer.promise获取,下面是promise对象的api:
1,then(successFn, errFn, notifyFn)
在promise被执行或者拒绝之前,notifyFn回调可能会被调用0到多次,以提供过程状态的 提示
then()方法总是返回一个新的promise,可以通过successFn或者errFn这样的返回值执行或 者被拒绝。它也能通过notifyFn提供通知。
.controller(“HomeController”,function($scope,GithubService){
GithubService.makeMultipleRwquest(‘……’)
.then(function(result){
//处理结果
},
function(err){
//请求失败,处理
},function(percentComplete){
$scope.progress= percentComplete;});
});
2, Catch(errFn): 可以用.catch(function(reason){})取代err回调:
$http.get('/repos/angular/angular.js/pulls')
.catch(function(reason) { deferred.reject(reason); });
3, finally(callback):当我们需要释放 一个资源,或者是运行一些清理工作,不管promise是成功还是失败时,这个方法会很有用
注:不能直接调用这个方法,因为finally是IE中JavaScript的一个保留字。
promise['finally'](function() {});
demo:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset=utf-8 />
<script src="http://code.angularjs.org/1.2.3/angular.min.js"></script>
<title>JS Bin</title>
</head>
<body ng-controller="myCtrl">
<script>
var app=angular.module("myApp",[])
.controller("myCtrl",["$scope","$q",function(s,$q){
function f1(num) {
document.write("success:" + (num++) + "<br/>");
return num;
}
function f2(num) {
document.write("errror:" + (num++) + "<br/>");
return num;
}
var defer = $q.defer();
var promise = defer.promise;
//方式1
// promise.then(f1,f2).then(f1,f2);
// 方式2
//promise.then(f1,f2);
//promise.then(f1,f2);
// 方式3
promise.then(f1,f2).then(f1,f2);//结果 error:7 success:8
// promise.catch(f2);
// promise.finally(f2);
//方式4
//promise.finally(f2).then(f1,f2);
defer.reject(7);
}]);
</script>
</body>
</html>
结果分别是什么呢?
提示:angular中的then的链式调用中如果defer发送的reject的那么 只有第一个promise是reject的回调,其他的都是resolve的回调
4, all() , 这个all()方法,可以把多个primise的数组合并成一个。当所有的promise执行成功后,会执行后面的回调。回调中的参数,是每个promise执行的结果。
当批量的执行某些方法时,就可以使用这个方法。
var funcA = function(){
var def = $q.defer();
console.log("funcA");
//some code
return def.promise;
}
var funcB = function(){
var def = $q.defer();
console.log("funcA");
//some code
return def.promise;
}
$q.all([funcA(),funcB()])
.then(function(result){
console.log(result);
});
参考链接:http://www.cnblogs.com/fliu/articles/5288531.html
http://blog.csdn.net/renfufei/article/details/19174015
http://liubin.org/promises-book/#promises-overview
https://www.jianshu.com/p/5dc90b5e62c2
angular的异步处理$q的使用(promise)的更多相关文章
- angular的$q服务和promise模式
此承诺/延迟(promise/deferred)实现的灵感来自于 Kris Kowal's Q CommonJS Promise建议文档 将承诺(promise) 作为和 异步执行操作(action) ...
- angular中$q用法, $q多个promise串行/同步/等待), $q.all用法,使用
$q的基本用法 function fn() { var defer = $q.defer(); setTimeout(function () { console.log(1); defer.resol ...
- js异步回调Async/Await与Promise区别 新学习使用Async/Await
Promise,我们了解到promise是ES6为解决异步回调而生,避免出现这种回调地狱,那么为何又需要Async/Await呢?你是不是和我一样对Async/Await感兴趣以及想知道如何使用,下面 ...
- Angular通信$q服务和promise对象
promise 约定(promise)是一个对象,表示在未来时间点会发生的某件事情,约定可以是三种状态之一:等待.完成或拒绝.约定将从等待状态开始,然后可以转换为完成或者拒绝状态,一旦约定完成或者被拒 ...
- 你所必须掌握的三种异步编程方法callbacks,listeners,promise
目录: 前言 Callbacks Listeners Promise 前言 coder都知道,javascript语言运行环境是单线程的,这意味着任何两行代码都不能同时运行.多任务同时进行时,实质上形 ...
- angularjs异步处理 $q.defer()
看别人的项目中有用到 var def = $q.defer()返回一个deferred异步对象def 当代码逻辑遇到 def.resolve(rtns); deferred状态为执行成功,返回rtns ...
- 异步编程的类型系统:promise & future & closure & observable----异步编程类型的结构和操作
异步编程类型的结构和操作. 上下文维护. A promise represents the eventual result of an asynchronous operation. The prim ...
- 将已经存在的异步请求callback转换为同步promise
由于js是单线程执行,为防止阻塞,会有很多异步回调函数callback,嵌套层次多了,可读性就差了很多.随着社区的发展,出现了promise.我们来将一些常见的回调函数做修改,变成promise的链式 ...
- [AngularJS] Angular 1.3 new $q constructor
<!DOCTYPE html> <html ng-app="app"> <head lang="en"> <meta ...
随机推荐
- 『Python CoolBook』C扩展库_其四_结构体操作与Capsule
点击进入项目 一.Python生成C语言结构体 C语言中的结构体传给Python时会被封装为胶囊(Capsule), 我们想要一个如下结构体进行运算,则需要Python传入x.y两个浮点数, type ...
- spring cloud(三)服务提供与调用
服务提供 我们假设服务提供者有一个hello方法,可以根据传入的参数,提供输出“hello xxx,this is first messge”的服务 1.pom包配置 创建一个springboot项目 ...
- Electron入门之ipcMain,ipcRenderer
ipcMain 模块是类EventEmitter的实例.当在主进程中使用它的时候,它控制着由渲染进程(web page)发送过来的异步或同步消息.从渲染进程发送过来的消息将触发事件. [发消息] 发送 ...
- wrk 使用记录及踩过的坑
wrk是什么?https://github.com/wg/wrk wrk 是一个非常小巧高效的开源性能测试工具,支持lua脚本来创建复杂的测试场景.wrk 的一个很好的特性就是能用很少的线程压出很大的 ...
- sql语句查询结果合并union all用法
整理别人的sql 大概的思想是用union 和union all --合并重复行select * from Aunion select * from B --不合并重复行select * from A ...
- xftp免费版使用
转自https://www.jb51.net/softs/621774.html
- BPM如何选型?
Gartner 对BPM 的定义是:BPM 是一个描述一组服务和工具的一般名词,这些服务和工具为显式的流程管理(如流程的分析.定义.执行.监视和管理)提供支持. 不是所有的BPM 产品都能包括BPM ...
- redis持久化RDB与AOF
redis持久化 Redis是一种内存型数据库,一旦服务器进程退出,数据库的数据就会丢失,为了解决这个问题,Redis提供了两种持久化的方案,将内存中的数据保存到磁盘中,避免数据的丢失. RDB持久化 ...
- 5.使用std的迭代器访问并修改图像
void Test_ColorReduceByIterator() { Mat g_srcImage=imread("D:\\OpenCV Projects\\OpenCV_Test_Ima ...
- FCC JS基础算法题(9):Mutations(比较字符串)
题目描述: 如果数组第一个字符串元素包含了第二个字符串元素的所有字符,函数返回true.举例,["hello", "Hello"]应该返回true,因为在忽略大 ...