AngularJS中的Promise详细介绍及实例代码


Posted in Javascript onDecember 13, 2016

Angular中的Promise

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

Promise

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

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

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

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

  • pending状态:可以过渡到履行或拒绝状态。
  • fulfilled状态:不能变为其他任何状态,而且状态不能改变,必须有value值。
  • 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 对象的方法

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

deffered 对象属性

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

Promise API

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

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

promise 对象的方法

then(errorHandler, fulfilledHandler, progressHandler):then方法用来监听一个Promise的不同状态。errorHandler监听failed状态,fulfilledHandler监听fulfilled状态,progressHandler监听unfulfilled(未完成)状态。此外,notify 回调可能被调用 0到多次,提供一个进度指示在解决或拒绝(resolve和rejected)之前。

catch(errorCallback) —— promise.then(null, errorCallback) 的快捷方式

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对象。

angular $apply ->成功响应
angular http 请求拦截

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
Mar 06 Javascript
JavaScript Event学习第二章 Event浏览器兼容性
Feb 07 Javascript
JavaScript中的包装对象介绍
Jan 27 Javascript
jquery实现鼠标滑过小图查看大图的方法
Jul 20 Javascript
jQuery实现简易的天天爱消除小游戏
Oct 16 Javascript
chrome浏览器如何断点调试异步加载的JS
Sep 05 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
Sep 09 Javascript
jQuery包裹节点用法完整示例
Sep 13 Javascript
原生JS获取元素集合的子元素宽度实例
Dec 14 Javascript
es6学习笔记之Async函数的使用示例
May 11 Javascript
vue-loader教程介绍
Jun 14 Javascript
vue实现自定义多选与单选的答题功能
Jul 05 Javascript
JS中事件冒泡和事件捕获介绍
Dec 13 #Javascript
AngularJS入门教程之路由机制ngRoute实例分析
Dec 13 #Javascript
解决Window10系统下Node安装报错的问题分析
Dec 13 #Javascript
浅析Jquery操作select
Dec 13 #Javascript
Vue.js使用v-show和v-if的注意事项
Dec 13 #Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
Dec 13 #Javascript
Es6 写的文件import 起来解决方案详解
Dec 13 #Javascript
You might like
PHP在XP下IIS和Apache2服务器上的安装
2006/09/05 PHP
关于PHP中Object对象的笔记分享
2011/06/28 PHP
php连接Access数据库错误及解决方法
2013/06/20 PHP
smarty简单分页的实现方法
2014/10/27 PHP
php模拟登陆的实现方法分析
2015/01/09 PHP
PHP的PDO连接讲解
2019/01/24 PHP
js判断浏览器的比较全的代码
2007/02/13 Javascript
JavaScript原型链示例分享
2014/01/26 Javascript
详解JavaScript函数
2015/12/01 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
2016/06/01 Javascript
Angular.JS中的指令引用template与指令当做属性详解
2017/03/30 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
2017/07/08 jQuery
Vue resource中的GET与POST请求的实例代码
2017/07/21 Javascript
一步步教你利用Canvas对图片进行处理
2017/09/19 Javascript
jquery实现企业定位式导航效果
2018/01/01 jQuery
vue项目实现github在线预览功能
2018/06/20 Javascript
vue搜索和vue模糊搜索代码实例
2019/05/07 Javascript
vue集成kindeditor富文本的实现示例代码
2019/06/07 Javascript
Vue中对iframe实现keep alive无刷新的方法
2019/07/23 Javascript
node运行js获得输出的三种方式示例详解
2020/07/02 Javascript
[04:49]2014DOTA2国际邀请赛 Newbee顺利挺进总决赛 ImbaTV独家专访
2014/07/19 DOTA
[01:13:01]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第三场
2018/04/05 DOTA
Python利用字典将两个通讯录文本合并为一个文本实例
2018/01/16 Python
Python实现的寻找前5个默尼森数算法示例
2018/03/25 Python
使用Python和Prometheus跟踪天气的使用方法
2019/05/06 Python
浅析PyTorch中nn.Linear的使用
2019/08/18 Python
基于Django signals 信号作用及用法详解
2020/03/28 Python
Python实现壁纸下载与轮换
2020/10/19 Python
CSS超出文本指定宽度用省略号代替和文本不换行
2016/05/05 HTML / CSS
Brother加拿大官网:打印机、贴标机、缝纫机
2019/10/09 全球购物
进步之星获奖感言
2014/02/22 职场文书
政府采购方案
2014/06/12 职场文书
实习单位推荐信
2015/03/27 职场文书
2015年数学教研工作总结
2015/07/22 职场文书
mysql 获取时间方式
2022/03/20 MySQL
Android开发手册自定义Switch开关按钮控件
2022/06/10 Java/Android