Angularjs Promise实例详解


Posted in Javascript onMarch 15, 2018

一、什么是Promise

Promise是对象,代表了一个函数最终可能的返回值或抛出的异常,就是用来异步处理值的。

Promise是一个构造函数,自己身上有all、reject、resolve这几个异步方式处理值的方法,原型上有then、catch等同样很眼熟的方法。

二、为什么使用Promise

有了Promise对象,就可以把异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。此外,Promise对象提供了统一的接口,使得控制异步操作更加容易。

Promise对象有以下2个特点:

1.对象的状态不受外界影响。

Promise对象代表一个异步操作,有三种状态:Pending(进行中)、Resolved(已完成)和Rejected(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。

2.一旦状态改变,就不会再变,任何时候都可以得到这个结果。

Promise对象的状态改变,只有两种可能:从Pending变为Resolved;从Pending变为Rejected。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果。

三、如何创建一个Promise

先贴一段代码:

define([
  'angularModule'
],function (app) {
  app.register.service('httpRequestService', ['$http', '$q', function ($http, $q) {
    return{
      request: function (params) {
        var deferred = $q.defer();
        $http({
          method : params.method,
          url : params.url
        }).success(
          function (data) {
            deferred.resolve(data);
          }
        ).error(
          function(data){
            deferred.reject(data);
          }
        );
        return deferred.promise;
      }
    }
  }])
});

 讲一下$q服务

q服务是AngularJS中自己封装实现的一种Promise实现。

要创建一个deferred对象,可以调用defer()方法:

var deferred = $q.defer(); 
//deffered上面暴露了三个方法,以及一个可以用于处理promise的promise属性。 
//promise属性里面又包含了then、catch、finally三个方法

Angularjs Promise实例详解

在Promise中,定义了三种状态:等待状态,完成状态,拒绝状态。

deffered API

1.deffered 对象的方法

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

2.deffered 对象属性

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

3.Promise API

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

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

4.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 被拒绝还是解决。

q常用的几个方法:

  • defer() 创建一个deferred对象,这个对象可以执行几个常用的方法,比如resolve,reject,notify等
  • all() 传入Promise的数组,批量执行,返回一个promise对象
  • when() 传入一个不确定的参数,如果符合Promise标准,就返回一个promise对象。

all()方法

当批量的执行某些方法时,就可以使用这个方法。有了all,你就可以并行执行多个异步操作,并且在一个回调中处理所有的返回数据。

用Promise.all来执行,all接收一个数组参数,里面的值最终都算返回Promise对象。这样,三个异步操作的并行执行的,等到它们都执行完后才会进到then里面。

那么,三个异步操作返回的数据哪里去了呢?都在then里面呢,all会把所有异步操作的结果放进一个数组中传给then,就是 下面的results。所以下面代码的输出结果就是:     

var funcA = function(){
        console.log("funcA");
        return "hello,funA";
      }
      var funcB = function(){
        console.log("funcB");
        return "hello,funB";
      }
      $q.all([funcA(),funcB()])
      .then(function(result){
        console.log(result);
      });

执行的结果:

funcA
funcB
Array [ "hello,funA", "hello,funB" ]

when()方法

when方法中可以传入一个参数,这个参数可能是一个值,可能是一个符合promise标准的外部对象。

var funcA = function(){
        console.log("funcA");
        return "hello,funA";
      }
      $q.when(funcA())
      .then(function(result){
        console.log(result);
      });

当传入的参数不确定时,可以使用这个方法。

hello,funA

四、链式请求

通过then()方法可以实现promise链式调用,因为then方法总是返回一个新的promise。

runAsync1()
.then(function(data){
  console.log(data);
  return runAsync2();
})
.then(function(data){
  console.log(data);
  return runAsync3();
})
.then(function(data){
  console.log(data);
});
function runAsync1(){
  var p = new Promise(function(resolve, reject){
    //做一些异步操作
    setTimeout(function(){
      console.log('异步任务1执行完成');
      resolve('随便什么数据1');
    }, 1000);
  });
  return p;      
}
function runAsync2(){
  var p = new Promise(function(resolve, reject){
    //做一些异步操作
    setTimeout(function(){
      console.log('异步任务2执行完成');
      resolve('随便什么数据2');
    }, 2000);
  });
  return p;      
}
function runAsync3(){
  var p = new Promise(function(resolve, reject){
    //做一些异步操作
    setTimeout(function(){
      console.log('异步任务3执行完成');
      resolve('随便什么数据3');
    }, 2000);
  });
  return p;      
}

运行结果:

Angularjs Promise实例详解

总结

以上所述是小编给大家介绍的Angularjs Promise实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
在 IE 中调用 javascript 打开 Excel 表
Dec 21 Javascript
弹出广告特效(一个IP只弹出一次)的代码
Jul 27 Javascript
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
Jun 14 Javascript
js获取select标签选中值的两种方式
Jan 09 Javascript
用jquery模仿的a的title属性的例子
Oct 22 Javascript
基于BootStrap环境写jQuery tabs插件
Jul 12 Javascript
JavaScript实现弹窗效果代码分析
Mar 09 Javascript
javascript基于定时器实现进度条功能实例
Oct 13 Javascript
Vue项目实现换肤功能的一种方案分析
Aug 28 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
May 03 Javascript
详解JS深拷贝与浅拷贝
Aug 04 Javascript
JS前端监控采集用户行为的N种姿势
Jul 23 Javascript
p5.js入门教程和基本形状绘制
Mar 15 #Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
Mar 15 #Javascript
vue之浏览器存储方法封装实例
Mar 15 #Javascript
vue实现提示保存后退出的方法
Mar 15 #Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
Mar 15 #Javascript
vue-cli创建的项目,配置多页面的实现方法
Mar 15 #Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
Mar 15 #Javascript
You might like
php学习 函数 课件
2008/06/15 PHP
用PHP即时捕捉PHP中的错误并发送email通知的实现代码
2013/01/19 PHP
JS event使用方法详解
2008/04/28 Javascript
Express作者TJ告别Node.js奔向Go
2014/07/14 Javascript
JSON格式的键盘编码对照表
2015/01/29 Javascript
$.extend 的一个小问题
2015/06/18 Javascript
jQuery超酷平面式时钟效果代码分享
2020/03/30 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
2015/12/24 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
2016/11/23 Javascript
Bootstrap的modal拖动效果
2016/12/25 Javascript
jQuery实现页面顶部下拉广告
2016/12/30 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
2017/04/13 Javascript
使用ef6创建oracle数据库的实体模型遇到的问题及解决方案
2017/11/09 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
2018/01/18 Javascript
微信小程序提取公用函数到util.js及使用方法示例
2019/01/10 Javascript
JS实现简易计算器
2020/02/14 Javascript
Jquery cookie插件实现原理代码解析
2020/08/04 jQuery
Openlayers3实现车辆轨迹回放功能
2020/09/29 Javascript
[19:15]DK战队纪录片
2014/09/02 DOTA
Python中运行并行任务技巧
2015/02/26 Python
PyCharm2019安装教程及其使用(图文教程)
2019/09/29 Python
Python脚本去除文件的只读性操作
2020/03/05 Python
Python可以实现栈的结构吗
2020/05/27 Python
基于python实现操作redis及消息队列
2020/08/27 Python
CSS3实现多样的边框效果
2018/05/04 HTML / CSS
德国高尔夫商店:Par71.de
2020/11/29 全球购物
临床医学专业毕业生的自我评价
2013/10/17 职场文书
幼儿园大班毕业感言
2014/02/06 职场文书
教师竞聘上岗演讲稿
2014/09/03 职场文书
办理护照工作证明
2014/10/10 职场文书
先进教育工作者事迹材料
2014/12/23 职场文书
爱国之歌(8首)
2019/09/29 职场文书
CSS实现漂亮的时钟动画效果的实例代码
2021/03/30 HTML / CSS
SQLServer 日期函数大全(小结)
2021/04/08 SQL Server
原型和原型链 prototype和proto的区别详情
2021/11/02 Javascript
CSS使用Flex和Grid布局实现3D骰子
2022/08/05 HTML / CSS