AngularJS中处理多个promise的方式


Posted in Javascript onFebruary 02, 2016

在使用AngularJS中处理promise的时候,有时会碰到需要处理多个promise的情况。

最简单的处理就是每个promise都then。如下:

var app = angular.module("app",[]);
app.controller("AppCtrl", function($q. $timeout){
var one = $q.defer();
var two = $q.defer();
var three = $q.defer();
$timeout(function(){
one.resolve("one done");
}, Math.random() * 1000)
$timeout(function(){
two.resolve("two done");
}, Math.random() * 1000) 
$timeout(function(){
three.resolve("three done");
}, Math.random() * 1000) 
functioin success(data){
console.log(data);
}
one.promise.then(success);
two.promise.then(success);
three.promise.then(success);
})

有没有更好的方式?

$q.all方法可以接受promise的一个数组,按如下调用:

var all = $q.all([one.promise, two.promise, three.promise]);
all.then(success);

什么是promise?

promise是一种用异步的方式处理值的方法,promise是对象,代表了一个函数最终可能的返回值或者抛出的异常,在与远程对象打交道时我们可以把他看作是远程对象的一个代理。 如果说是promise也是异步处理方式的一种,那么我们会想起它和XHR和$.ajax有啥区别呢?

习惯上js使用闭包或者回调来相应非同步返回的数据,比如页面加载之后的XHR请求。我们可以跟数据进行正常交互,就好像它已经返回了一样,而不需要依赖回调函数的触发。

那么ng提出的promise是为了解决什么问题呢? 回调已经被使用了很长时间,通常如果有回调依赖其他还回调时将会时调试变得非常艰难,每一步调用之后都需要显示处理错误。与之不同的是promise提供了另外一个抽象:这些函数返回promise对象。

为什么使用promise

使用了promise的收获之一是逃脱了回调的固定思维逻辑。promise让异步处理的机制看上去更像是同步,基于同步函数我们可以按照预期来捕获返回值和异常值。可以在程序中的任何时刻捕捉错误,并且绕过依赖于程序异常的后续代码,我们不需要思考这个同步带来的好处。因此使用promise的目的是:获取功能组合和错误冒泡能力的同时,保持代码异步运行的能力。

promise是头等对象,自带了一些约定。

• 只有一个resolve或者reject会被调用到。

• 如果promise被执行或者被拒绝了,依赖于他们的处理程序仍然会被调用。

• 处理程序总是会被异步调用。

Javascript 相关文章推荐
jQuery 获取URL的GET参数值的小例子
Apr 18 Javascript
实例详解jQuery结合GridView控件的使用方法
Jan 04 Javascript
浅析BootStrap栅格系统
Jun 07 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
Feb 21 Javascript
canvas红包照片实例分享
Feb 28 Javascript
angular 用拦截器统一处理http请求和响应的方法
Jun 08 Javascript
JS设计模式之惰性模式(二)
Sep 29 Javascript
vue项目中用cdn优化的方法
Jan 03 Javascript
AngularJS中ng-options实现下拉列表的数据绑定方法
Aug 13 Javascript
小程序点击图片实现自动播放视频
May 29 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
Mar 26 Javascript
JavaScript中的执行环境和作用域链
Sep 04 Javascript
AngularJS数据源的多种获取方式汇总
Feb 02 #Javascript
多种JQuery循环滚动文字图片效果代码
Jun 23 #Javascript
三种AngularJS中获取数据源的方式
Feb 02 #Javascript
原生JS实现拖拽图片效果
Aug 27 #Javascript
基于jquery实现下拉框美化特效
Feb 02 #Javascript
AngularJS自动表单验证
Feb 01 #Javascript
javascript实现右侧弹出“分享到”窗口效果
Feb 01 #Javascript
You might like
PHP超级全局变量数组小结
2012/10/04 PHP
php使用$_POST或$_SESSION[]向js函数传参
2014/09/16 PHP
PHP数组相关函数汇总
2015/03/24 PHP
php筛选不存在的图片资源
2015/04/28 PHP
分享php多功能图片处理类
2016/05/15 PHP
基于thinkPHP3.2实现微信接入及查询token值的方法
2017/04/18 PHP
PHP getNamespaces()函数讲解
2019/02/03 PHP
浅谈php常用的7大框架的优缺点
2020/07/20 PHP
jquery实现心算练习代码
2010/12/06 Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
2013/01/22 Javascript
浅析Javascript使用include/require
2013/11/13 Javascript
js实现最短的XML格式化工具实例
2015/03/12 Javascript
JS实现的自定义右键菜单实例二则
2015/09/01 Javascript
Jquery和Js获得元素标签名称的方法总结
2016/10/08 Javascript
原生JS实现N级菜单的代码
2017/05/21 Javascript
Angular中自定义Debounce Click指令防止重复点击
2017/07/26 Javascript
three.js实现3D影院的原理的代码分析
2017/12/18 Javascript
微信小程序位置授权处理方法
2019/06/13 Javascript
jquery实现的分页显示功能示例
2019/08/23 jQuery
vue 组件基础知识总结
2021/01/26 Vue.js
[50:01]Ti4 冒泡赛第二天 NEWBEE vs Titan
2014/07/15 DOTA
[42:25]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第三场
2018/04/06 DOTA
[37:50]VP vs TNC Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
[46:04]Liquid vs VP Supermajor决赛 BO 第四场 6.10
2018/07/05 DOTA
Python使用py2exe打包程序介绍
2014/11/20 Python
Python数据结构与算法之常见的分配排序法示例【桶排序与基数排序】
2017/12/15 Python
Python中Numpy ndarray的使用详解
2019/05/24 Python
实例详解Python模块decimal
2019/06/26 Python
工程预算与管理应届生求职信
2013/10/06 职场文书
药学专业个人的自我评价
2013/12/31 职场文书
大三毕业自我鉴定
2014/01/15 职场文书
业务总经理岗位职责
2014/02/03 职场文书
小学社团活动总结
2014/06/27 职场文书
雨花台导游词
2015/02/06 职场文书
个人政治思想总结
2015/03/05 职场文书
一文搞懂Python Sklearn库使用
2021/08/23 Python