Angular中的Promise对象($q介绍)


Posted in Javascript onMarch 03, 2015

在用JQuery的时候就知道 promise 是 Js异步编程模式的一种模式,但是不是很明白他跟JQuery的deferred对象有什么区别。随着公司项目的进行,要跟后台接数据了,所以决定搞定它。

Promise

Promise是一种模式,以同步操作的流程形式来操作异步事件,避免了层层嵌套,可以链式操作异步事件。

我们知道,在编写javascript异步代码时,callback是最最简单的机制,可是用这种机制的话必须牺牲控制流、异常处理和函数语义化为代价,甚至会让我们掉进出现callback大坑,而promise解决了这个问题。

ES6中Promise、angularJS内置的AngularJS内置Q,以及when采用的都是Promises/A规范,如下:

每个任务都有三种状态:未完成(pending)、完成(fulfilled)、失败(rejected)。

1.pending状态:可以过渡到履行或拒绝状态。
2.fulfilled状态:不能变为其他任何状态,而且状态不能改变,必须有value值。
3.rejected状态:不能变为其他任何状态,而且状态不能改变,必须有reason。

状态的转移是一次性的,状态一旦变成fulfilled(已完成)或者failed(失败/拒绝),就不能再变了。

function okToGreet(name){

    return name === 'Robin Hood';

}

 

function asyncGreet(name) {

    var deferred = $q.defer();

 

    setTimeout(function() {

     // 因为这个异步函数fn在未来的异步执行,我们把代码包装到 $apply 调用中,一边正确的观察到 model 的改变

        $scope.$apply(function() {

            deferred.notify('About to greet ' + name + '.');

 

            if (okToGreet(name)) {

                deferred.resolve('Hello, ' + name + '!');

            } else {

                deferred.reject('Greeting ' + name + ' is not allowed.');

            }

        });

    }, 1000);

 

    return deferred.promise;

}

 

var promise = asyncGreet('Robin Hood');

promise.then(function(greeting) {

    alert('Success: ' + greeting);

}, function(reason) {

    alert('Failed: ' + reason);

}, function(update) {

    alert('Got notification: ' + update);

});

Q Promise的基本用法

上面代码表示, $q.defer() 构建的 deffered 实例的几个方法的作用。如果异步操作成功,则用resolve方法将Promise对象的状态变为“成功”(即从pending变为resolved);如果异步操作失败,则用reject方法将状态变为“失败”(即从pending变为rejected)。最后返回 deferred.promise ,我们就可以链式调用then方法。

JS将要有原生Promise,ES6中已经有Promise对象,firefox和Chrome 32 beta版本已经实现了基本的Promise API

AngularJs中的$q.defferd

通过 调用 $q.defferd 返回deffered对象以链式调用。该对象将Promises/A规范中的三个任务状态通过API关联。

deffered API

deffered 对象的方法

1.resolve(value):在声明resolve()处,表明promise对象由pending状态转变为resolve。
2.reject(reason):在声明resolve()处,表明promise对象由pending状态转变为rejected。
3.notify(value) :在声明notify()处,表明promise对象unfulfilled状态,在resolve或reject之前可以被多次调用。

deffered 对象属性

promise :最后返回的是一个新的deferred对象 promise 属性,而不是原来的deferred对象。这个新的Promise对象只能观察原来Promise对象的状态,而无法修改deferred对象的内在状态可以防止任务状态被外部修改。

Promise API

当创建 deferred 实例时会创建一个新的 promise 对象,并可以通过 deferred.promise 得到该引用。

promise 对象的目的是在 deferred 任务完成时,允许感兴趣的部分取得其执行结果。

promise 对象的方法

1.then(errorHandler, fulfilledHandler, progressHandler):then方法用来监听一个Promise的不同状态。errorHandler监听failed状态,fulfilledHandler监听fulfilled状态,progressHandler监听unfulfilled(未完成)状态。此外,notify 回调可能被调用 0到多次,提供一个进度指示在解决或拒绝(resolve和rejected)之前。
2.catch(errorCallback) —— promise.then(null, errorCallback) 的快捷方式
3.finally(callback) ——让你可以观察到一个 promise 是被执行还是被拒绝, 但这样做不用修改最后的 value值。 这可以用来做一些释放资源或者清理无用对象的工作,不管promise 被拒绝还是解决。 更多的信息请参阅 完整文档规范.

通过then()方法可以实现promise链式调用。

promiseB = promiseA.then(function(result) {  

  return result + 1;  

});  

 

// promiseB 将会在处理完 promiseA 之后立刻被处理,  

// 并且其  value值是promiseA的结果增加1

$q的其他方法

$q.when(value):传递变量值,promise.then()执行成功回调
$q.all(promises):多个promise必须执行成功,才能执行成功回调,传递值为数组或哈希值,数组中每个值为与Index对应的promise对象

Javascript 相关文章推荐
IE浏览器PNG图片透明效果代码
Sep 02 Javascript
理解Javascript_07_理解instanceof实现原理
Oct 15 Javascript
基于jquery实现的移入页面上空文本框时,让它变为焦点,移出清除焦点
Jul 26 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
Aug 24 Javascript
微信JS接口大全
Aug 25 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
Dec 27 Javascript
Javascript 严格模式use strict详解
Sep 16 Javascript
Node批量爬取头条视频并保存方法
Sep 20 Javascript
vue 路由子组件created和mounted不起作用的解决方法
Nov 05 Javascript
nuxt配置通过指定IP和端口访问的实现
Jan 08 Javascript
Vue 技巧之控制父类的 slot
Feb 24 Javascript
原生js+canvas实现贪吃蛇效果
Aug 02 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
Mar 03 #Javascript
Node.js 学习笔记之简介、安装及配置
Mar 03 #Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
Mar 03 #Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
Mar 03 #Javascript
JS实现鼠标点击展开或隐藏表格行的方法
Mar 03 #Javascript
浅谈JavaScript数据类型
Mar 03 #Javascript
JavaScript中property和attribute的区别详细介绍
Mar 03 #Javascript
You might like
在PHP中养成7个面向对象的好习惯
2010/01/28 PHP
php利用单例模式实现日志处理类库
2014/02/10 PHP
Smarty模板学习笔记之Smarty简介
2014/05/20 PHP
PHP开发框架kohana3 自定义路由设置示例
2014/07/14 PHP
php短信接口代码
2016/05/13 PHP
bindParam和bindValue的区别以及在Yii2中的使用详解
2018/03/12 PHP
PHP iconv()函数字符编码转换的问题讲解
2019/03/22 PHP
jQuery 白痴级入门教程
2009/11/11 Javascript
Javascript基础_简单比较undefined和null 值
2016/06/14 Javascript
js实现下拉菜单效果
2017/03/01 Javascript
javascript防篡改对象实例详解
2017/04/10 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
2017/05/20 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
2017/05/28 Javascript
深入学习nodejs中的async模块的使用方法
2017/07/12 NodeJs
微信小程序实战篇之购物车的实现代码示例
2017/11/30 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
2019/05/14 Javascript
JavaScript动态添加数据到表单并提交的几种方式
2019/06/26 Javascript
node.js实现带进度条的多文件上传
2020/03/27 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
2020/01/02 Javascript
vue 实现把路由单独分离出来
2020/08/13 Javascript
python删除文件示例分享
2014/01/28 Python
Python使用Scrapy爬取妹子图
2015/05/28 Python
Python2.x与Python3.x的区别
2016/01/14 Python
Python的爬虫包Beautiful Soup中用正则表达式来搜索
2016/01/20 Python
python dict.get()和dict['key']的区别详解
2016/06/30 Python
Python随机读取文件实现实例
2017/05/25 Python
python中sys.argv函数精简概括
2018/07/08 Python
Python3.6简单的操作Mysql数据库的三个实例
2018/10/17 Python
树莓派动作捕捉抓拍存储图像脚本
2019/06/22 Python
您的网上新华书店:文轩网
2016/08/24 全球购物
美国现代家具网站:Design Within Reach
2018/07/19 全球购物
DC Shoes荷兰官方网站:美国极限运动品牌
2019/10/22 全球购物
做一个有道德的人活动方案
2014/08/25 职场文书
派出所副所长四风问题个人整改措施思想汇报
2014/10/13 职场文书
2016年大学生党员公开承诺书
2016/03/24 职场文书
2021-4-3课程——SQL Server查询【2】
2021/04/05 SQL Server