1、先来看一段Demo,看完这个demo你可以思考下如果使用$.ajax如何处理同样的逻辑,使用ng的promise有何优势?

var ngApp=angular.module('ngApp',[]);

/*******************************************************************
* $q为内置服务
****************************************************************/
ngApp.factory('UserInfoService',['$http','$q',function($http,$q){
return{
query:function(){
var defer=$q.defer(); //声明延后执行
$http({method:'GET',url:'data/students.json'}).
success(function(data,status,headers,config){
defer.resolve(data); //声明执行成功
console.log('UserInfoService success');
}).
error(function(data,status,headers,config){
defer.reject(); //声明执行失败
}); return defer.promise; //返回承诺,返回获取数据的API
}
}
}]); ngApp.controller('MainCtrl',['$scope','UserInfoService',function($scope,UserInfoService){
     var promise = UserInfoService.query(); //同步调用,获取承诺接口
promise.then(function(data){
$scope.user=data; //调用承诺接口resolove()
console.log('MainCtrl ...');
},function(data){
$scope.user={error:'数据不存在。。。'}; //调用承诺接口reject();
}); }]);

2、什么是promise?

promise是一种用异步的方式处理值的方法,promise是对象,代表了一个函数最终可能的返回值或者抛出的异常,在与远程对象打交道时我们可以把他看作是远程对象的一个代理。 如果说是promise也是异步处理方式的一种,那么我们会想起它和XHR和$.ajax有啥区别呢?

习惯上js使用闭包或者回调来相应非同步返回的数据,比如页面加载之后的XHR请求。我们可以跟数据进行正常交互,就好像它已经返回了一样,而不需要依赖回调函数的触发。

那么ng提出的promise是为了解决什么问题呢? 回调已经被使用了很长时间,通常如果有回调依赖其他还回调时将会时调试变得非常艰难,每一步调用之后都需要显示处理错误。与之不同的是promise提供了另外一个抽象:这些函数返回promise对象。

从一定层面上看ng改变的不是简单的改变代码风格,而是让我对一些思维习惯发起了反思和改善。

回调示例

User.get(fromId,{
success:function(){
user.friends.find(toId,function(){})
},
failure:function(){}
})

ng promise示例

User.get(fromId).
then(function(user){ },function(err){ }).
then(function(){},function(){});

  

3、为什么使用promise

使用了promise的收获之一是逃脱了回调的固定思维逻辑。promise让异步处理的机制看上去更像是同步,基于同步函数我们可以按照预期来捕获返回值和异常值。可以在程序中的任何时刻捕捉错误,并且绕过依赖于程序异常的后续代码,我们不需要思考这个同步带来的好处。因此使用promise的目的是:获取功能组合和错误冒泡能力的同时,保持代码异步运行的能力。

promise是头等对象,自带了一些约定。

  • 只有一个resolve或者reject会被调用到
  • 如果promise被执行或者被拒绝了,依赖于他们的处理程序仍然会被调用
  • 处理程序总是会被异步调用

4、如何创建promise

想要在angularjs中创建promise,可以使用内置的$q服务,$q服务在它的deferred API中提供了一些方法。

首先把它注入到你想使用它的对象中

angular.module('ngApp',[]).
factory('UserInfoService',['$q',function($q){
//code here
}])

   要创建一个deferred对象,可以调用defer()方法; var deferred= $q.defer();

deferred对象暴露了三个方法,以及一个可以用于处理promise的promise属性。

  • resolve(value)。 deferred.resolve({name:"Kobe",Age:36});
  • reject(reason)。 deferred.reject("Can't update user");
  • notify(value)。这个方法用promise的执行状态进行响应。 
  • then(successFn,errFn,notifyFn)。
  • catch(errFn)。
  • finally(callback)。finally允许我们观察promise的执行或者拒绝,而无需修改结果的值。通常就做一些资源的清理工作。

5、链式请求

      

GitHubService.then(function(data){

}).then(function(data){
$scope.Users=data;
});

  

Angularjs promise对象解析的更多相关文章

  1. angularJS中的Promise对象($q)的深入理解

    原文链接:a better way to learn AngularJS - promises AngularJS通过内置的$q服务提供Promise编程模式.通过将异步函数注册到promise对象, ...

  2. ECMAScript6的Promise对象

    1. 概念 Promise对象用于异步(asynchronouss)计算,一个Promise对象代表着一个还未完成,但预期完成的操作. 2. 出现原因: 1)  如果你需要通过ajax发送多次请求,而 ...

  3. angularJS promise $q

    Promise 一 介绍 1.什么是promise 我们知道JavaScript语言的执行环境是“单线程”,所谓单线程,就是一次只能够执行一个任务,如果有多个任务的话就要排队,前面一个任务完成后才可以 ...

  4. Angular通信$q服务和promise对象

    promise 约定(promise)是一个对象,表示在未来时间点会发生的某件事情,约定可以是三种状态之一:等待.完成或拒绝.约定将从等待状态开始,然后可以转换为完成或者拒绝状态,一旦约定完成或者被拒 ...

  5. angularjs promise详解

    一.什么是Promise Promise是对象,代表了一个函数最终可能的返回值或抛出的异常,就是用来异步处理值的. Promise是一个构造函数,自己身上有all.reject.resolve这几个异 ...

  6. 前端笔记之ES678&Webpack&Babel(下)AMD|CMD规范&模块&webpack&Promise对象&Generator函数

    一.AMD和CMD规范(了解) 1.1传统的前端开发多个js文件的关系 yuan.js中定义了一个函数 function mianji(r){ return 3.14 * r * r } main.j ...

  7. Promise原理讲解 && 实现一个Promise对象 (遵循Promise/A+规范)

    1.什么是Promise? Promise是JS异步编程中的重要概念,异步抽象处理对象,是目前比较流行Javascript异步编程解决方案之一 2.对于几种常见异步编程方案 回调函数 事件监听 发布/ ...

  8. ES6之Promise对象学习——8个例子学会Promise

    目录 Promise 立即执行 Promise 三种状态 Promise 不可逆性 链式调用 Promise.then()回调异步性 Promise中的异常 Promise.resolve() res ...

  9. 16. Promise对象

    目录 Promise对象 一.含义 1. Promise是什么 2. 实例讨论 二.Promise特性案例解析 1. Promise的立即执行性 2. promise的三种状态 3. Promise的 ...

随机推荐

  1. 温故而知新 css + html 超级牛逼的居中策略

    该方法甚至可以解决img内容居中的问题 套路:最外层div宽度为居中内容所占的宽度(通常是1170px),并且使其居中(margin:auto) 里层的div宽度为全屏(通常是1920px;)再mar ...

  2. python1

    leetcode上面的很简单的题目 Given an integer (signed 32 bits), write a function to check whether it is a power ...

  3. 禁用nested loop join里的spool

    禁用nested loop join里的spool 转载自: https://blogs.msdn.microsoft.com/psssql/2015/12/15/spool-operator-and ...

  4. NodeJs 开发微信公众号(一)准备工作

    前言 大概是一个月前,自己用业余时间做了一个微信公众号.微信开发,尤其是对后台不熟悉的人来说显得尤其困难.首先要克服的是后台语言(nodejs)的一些不熟悉困难,其次,也是最大的一点困难是在跟微信交互 ...

  5. UI控件(UIToolbar)

    @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; _toolbar = [[UIToolbar all ...

  6. 使用HTML5的History API

    HTML5 History API提供了一种功能,能让开发人员在不刷新整个页面的情况下修改站点的URL.这个功能很有用,例如通过一段JavaScript代码局部加载页面的内容,你希望通过改变当前页面的 ...

  7. [Hadoop大数据]——Hive部署入门教程

    Hive是为了解决hadoop中mapreduce编写困难,提供给熟悉sql的人使用的.只要你对SQL有一定的了解,就能通过Hive写出mapreduce的程序,而不需要去学习hadoop中的api. ...

  8. angularjs中provider,factory,service的区别和用法

    angularjs中provider,factory,service的区别和用法 都能提供service,但是又有差别 service 第一次被注入时实例化,只实例化一次,整个应用的生命周期中是个单例 ...

  9. Birt报表存储过程多选参数的设置

    Birt对存储过程的操作是很简单的一行语句,只需要在Data Set中写上类似这样 {call CAMPAIGN_REAL_TIME_MONITOR(?,?)} 如下图 本报表是存在两个参数,一个允许 ...

  10. sizzle分析记录: 自定义伪类选择器

    可见性 :hidden :visible 隐藏对象没有宽高,前提是用display:none处理的 jQuery.expr.filters.hidden = function( elem ) { // ...