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 相关文章推荐
JavaScript高级程序设计 阅读笔记(十七) js事件
Aug 14 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
Jun 05 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
Mar 23 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
Jul 07 Javascript
深入理解jQuery layui分页控件的使用
Aug 17 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
Nov 07 Javascript
JavaScript Base64 作为文件上传的实例代码解析
Feb 14 Javascript
2种简单的js倒计时方式
Oct 20 Javascript
Vue.js划分组件的方法
Oct 29 Javascript
Vue如何实现监听组件原生事件
Jul 03 Javascript
vue 弹出遮罩层样式实例
Jul 22 Javascript
vue 实现弹窗关闭后刷新效果
Apr 08 Vue.js
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边学边教》(02.Apache+PHP环境配置――上篇)
2006/12/13 PHP
php读取大文件示例分享(文件操作类)
2014/04/13 PHP
php可生成缩略图的文件上传类实例
2014/12/17 PHP
基于PHP实现栈数据结构和括号匹配算法示例
2017/08/10 PHP
javascript multibox 全选
2009/03/22 Javascript
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
2011/09/22 Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
2013/05/15 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
2014/12/29 Javascript
JAVA四种基本排序方法实例总结
2015/07/24 Javascript
10个很棒的jQuery代码片段
2015/09/24 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
2016/09/04 Javascript
简单学习vue指令directive
2016/11/03 Javascript
详解使用fetch发送post请求时的参数处理
2017/04/05 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
2017/07/21 Javascript
vue-cli3添加模式配置多环境变量的方法
2019/06/05 Javascript
javascript实现弹出层效果
2019/12/10 Javascript
JS实现放烟花效果
2020/03/10 Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
2020/05/11 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
2020/07/15 Javascript
[54:06]OG vs TNC 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
使用PYTHON创建XML文档
2012/03/01 Python
详解Python编程中包的概念与管理
2015/10/16 Python
Python数据可视化编程通过Matplotlib创建散点图代码示例
2017/12/09 Python
用tensorflow实现弹性网络回归算法
2018/01/09 Python
Python中如何使用if语句处理列表实例代码
2019/02/24 Python
简单了解python shutil模块原理及使用方法
2020/04/28 Python
用python进行视频剪辑
2020/11/02 Python
python中pop()函数的语法与实例
2020/12/01 Python
HTML5录音实践总结(Preact)
2020/05/07 HTML / CSS
Myholidays美国:在线旅游网站
2019/08/16 全球购物
应届生的求职推荐信范文
2013/11/30 职场文书
2014年图书室工作总结
2014/12/09 职场文书
中学生国庆节演讲稿2015
2015/07/30 职场文书
2016年“6.26”禁毒宣传月系列活动总结
2016/04/05 职场文书
OpenCV全景图像拼接的实现示例
2021/06/05 Python
Win11筛选键导致键盘失灵怎么解决? Win11关闭筛选键的技巧
2022/04/08 数码科技