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 入门基础学习
Mar 10 Javascript
js实现图片从左往右渐变切换效果的方法
Feb 06 Javascript
JavaScript事件委托实例分析
May 26 Javascript
jQuery实现产品对比功能附源码下载
Aug 09 Javascript
探究Vue.js 2.0新增的虚拟DOM
Oct 20 Javascript
文件上传的几个示例分享【推荐】
Dec 16 Javascript
详解axios在node.js中的post使用
Apr 27 Javascript
深入理解Webpack 中路径的配置
Jun 17 Javascript
angular2 ng build部署后base文件路径问题详细解答
Jul 15 Javascript
vue项目中v-model父子组件通信的实现详解
Dec 10 Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
Aug 25 Javascript
js实现弹幕飞机效果
Aug 27 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
第四节 构造函数和析构函数 [4]
2006/10/09 PHP
PHP Filter过滤器全面解析
2016/08/09 PHP
PHP7新特性foreach 修改示例介绍
2016/08/26 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
jquery图片上下tab切换效果
2011/03/18 Javascript
JavaScript 产生不重复的随机数三种实现思路
2012/12/13 Javascript
javascript中拼接HTML字符串的最快、最好的方法
2014/06/07 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
2014/08/22 Javascript
JavaScript里实用的原生API汇总
2015/05/14 Javascript
JavaScript实现cookie的写入、读取、删除功能
2015/11/05 Javascript
理解JavaScript中Promise的使用
2016/01/18 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
2019/02/13 Javascript
jQuery Migrate 插件用法实例详解
2019/05/22 jQuery
Node.js+Vue脚手架环境搭建的方法步骤
2020/03/08 Javascript
完美解决vue 中多个echarts图表自适应的问题
2020/07/19 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
2020/10/22 Javascript
在vue中使用jsonp进行跨域请求接口操作
2020/10/29 Javascript
js基于canvas实现时钟组件
2021/02/07 Javascript
Python的另外几种语言实现
2015/01/29 Python
python解决js文件utf-8编码乱码问题(推荐)
2018/05/02 Python
python实现图片文件批量重命名
2020/03/23 Python
详解django.contirb.auth-认证
2018/07/16 Python
分享Python切分字符串的一个不错方法
2018/12/14 Python
Django框架序列化与反序列化操作详解
2019/11/01 Python
Python+OpenCV实现实时眼动追踪的示例代码
2019/11/11 Python
Python猫眼电影最近上映的电影票房信息
2020/09/18 Python
Python LMDB库的使用示例
2021/02/14 Python
暑假实习求职信范文
2013/09/22 职场文书
打架检讨书50字
2014/01/11 职场文书
幼儿园六一儿童节主持节目串词
2014/03/21 职场文书
学习型党组织建设经验材料
2014/05/26 职场文书
校园标语大全
2014/06/19 职场文书
2014国庆节国旗下演讲稿(精选版)
2014/09/26 职场文书
大雁塔导游词
2015/02/04 职场文书
JavaScript原始值与包装对象的详细介绍
2021/05/11 Javascript
Mysql开启外网访问
2022/05/15 MySQL