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 相关文章推荐
经常用到的JavasScript事件的翻译
Apr 09 Javascript
Prototype ObjectRange对象学习
Jul 19 Javascript
Javascript 实用小技巧
Apr 07 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
Nov 19 Javascript
Javascript获取当前时间函数和时间操作小结
Oct 01 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
Sep 26 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
Jul 13 Javascript
ionic2懒加载配置详解
Sep 01 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
Oct 14 Javascript
js判断节假日实例代码
Dec 27 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
详解nginx配置vue h5 history去除#号
Nov 09 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
我的论坛源代码(一)
2006/10/09 PHP
PHP 采集心得技巧
2009/05/15 PHP
php之CodeIgniter学习笔记
2013/06/17 PHP
kohana框架上传文件验证规则写法示例
2014/07/14 PHP
PHP标准库(PHP SPL)详解
2019/03/16 PHP
List the Stored Procedures in a SQL Server database
2007/06/20 Javascript
IE本地存储userdata的一个bug说明
2010/07/01 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
2015/04/12 Javascript
js实现模拟计算器退格键删除文字效果的方法
2015/05/07 Javascript
js实现继承的5种方式
2015/12/01 Javascript
盘点javascript 正则表达式中 中括号的【坑】
2016/03/16 Javascript
jQuery实现的简单拖动层示例
2017/02/22 Javascript
node.js入门学习之url模块
2017/02/25 Javascript
原生js实现旋转木马轮播图效果
2017/02/27 Javascript
Angular.js中控制器之间的传值详解
2017/04/24 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
2017/05/15 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
2018/03/07 Javascript
微信小程序wx.uploadfile 本地文件转base64的实现代码
2018/06/28 Javascript
Vue三种常用传值示例(父传子、子传父、非父子)
2018/07/24 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
2018/10/10 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
2018/12/06 Javascript
通过Nodejs搭建网站简单实现注册登录流程
2019/06/14 NodeJs
解决vue.js提交数组时出现数组下标的问题
2019/11/05 Javascript
[53:21]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-CDEC
2014/05/22 DOTA
[10:07]2014DOTA2国际邀请赛 实拍选手现场观战DK对阵Titan
2014/07/12 DOTA
Python爬取读者并制作成PDF
2015/03/10 Python
Python中处理字符串的相关的len()方法的使用简介
2015/05/19 Python
Python实现矩阵相乘的三种方法小结
2018/07/26 Python
关于python 跨域处理方式详解
2020/03/28 Python
python爬虫中url管理器去重操作实例
2020/11/30 Python
CSS3等相关属性制作分页导航实现代码
2012/12/24 HTML / CSS
日本小田急百货官网:Odakyu
2018/07/19 全球购物
戴尔英国翻新电脑和电子产品:Dell UK Refurbished Computers
2019/07/30 全球购物
房屋买卖委托公证书
2014/04/08 职场文书
法定代表人授权委托书
2014/09/19 职场文书
优秀教师个人材料
2014/12/15 职场文书