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实现点击栏目背景色改变
Dec 10 Javascript
实例分析javascript中的call()和apply()方法
Nov 28 Javascript
妙用Angularjs实现表格按指定列排序
Jun 23 Javascript
详解vue组件开发脚手架
Jun 15 Javascript
使用D3.js构建实时图形的示例代码
Aug 28 Javascript
JS中注入eval, Function等系统函数截获动态代码
Apr 03 Javascript
通过angular CDK实现页面元素拖放的步骤详解
Jul 01 Javascript
js实现简单选项卡制作
Aug 05 Javascript
javascript使用正则表达式实现注册登入校验
Sep 23 Javascript
JS检测浏览器开发者工具是否打开的方法详解
Oct 02 Javascript
nuxt 页面路由配置,主页轮播组件开发操作
Nov 05 Javascript
JS前端宏任务微任务及Event Loop使用详解
Jul 23 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生成EXCEL的东东
2006/10/09 PHP
PHP面向对象程序设计之对象克隆clone和魔术方法__clone()用法分析
2019/06/12 PHP
yii2.0框架多模型操作示例【添加/修改/删除】
2020/04/13 PHP
解密效果
2006/06/23 Javascript
JS+XML 省份和城市之间的联动实现代码
2009/10/14 Javascript
实现web打印的各种方法介绍及实现代码
2013/01/09 Javascript
在Mac OS下使用Node.js的简单教程
2015/06/24 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
2016/04/12 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
2016/06/13 Javascript
JavaScript禁止用户多次提交的两种方法
2016/07/24 Javascript
JS实现数组按升序及降序排列的方法
2017/04/26 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
2017/11/24 Javascript
Angular之toDoList的实现代码示例
2017/12/02 Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
2018/01/16 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
2018/02/09 Javascript
解决layer弹出层自适应页面大小的问题
2019/09/16 Javascript
Vue.js下拉菜单组件使用方法详解
2019/10/19 Javascript
浅析vue中的nextTick
2020/12/28 Vue.js
[01:01:24]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第三局
2016/02/25 DOTA
[36:33]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.29
2020/12/02 DOTA
numpy.transpose对三维数组的转置方法
2018/04/17 Python
python使用turtle绘制分形树
2018/06/22 Python
解决python给列表里添加字典时被最后一个覆盖的问题
2019/01/21 Python
python使用正则表达式去除中文文本多余空格,保留英文之间空格方法详解
2020/02/11 Python
在Python IDLE 下调用anaconda中的库教程
2020/03/09 Python
python实现将中文日期转换为数字日期
2020/07/14 Python
pandas统计重复值次数的方法实现
2021/02/20 Python
css3实现wifi信号逐渐增强效果实例
2017/08/09 HTML / CSS
英国家喻户晓的折扣商场:TK Maxx
2017/05/26 全球购物
高中体育教学反思
2014/01/29 职场文书
公司表扬信格式
2015/05/04 职场文书
2015年英语教学工作总结
2015/05/25 职场文书
护士业务学习心得体会
2016/01/25 职场文书
四则混合运算教学反思
2016/02/23 职场文书
Python中的matplotlib绘制百分比堆叠柱状图,并为每一个类别设置不同的填充图案
2022/04/20 Python
Golang Web 框架Iris安装部署
2022/08/14 Python