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. Swift 3 and OpenGL on Linux and macOS with GLFW

    https://solarianprogrammer.com/2016/11/19/swift-opengl-linux-macos-glfw/ Swift 3 and OpenGL on Linux ...

  2. JsonUtil

    package com.test.base.util.json; import java.beans.IntrospectionException; import java.beans.Introsp ...

  3. PHP基础知识之foreach

    定义: foreach (array_expression as $value)------------循环时传递key foreach (array_expression as $key => ...

  4. 初识WEB:输入URL之后的故事

    1. 概述2. HTTP请求过程3. 相关性能检测及优化手段4. 浏览器的呈现过程5. 浏览器的呈现引擎6. 引用及延伸阅读 概述 为什么输入www.cnblogs.com之后敲一个回车,浏览器就会显 ...

  5. 剑指Offer面试题:34.翻转单词顺序VS左旋转字符串

    一.题目一:翻转单词顺序 1.1 题目说明 题目一:输入一个英文句子,翻转句子中单词的顺序,但单词内字符的顺序不变.为简单起见,标点符号和普通字母一样处理.例如输入字符串"I am a st ...

  6. .NET项目版本号的小随笔

    [题外话] 一直以来都对.NET项目中的几个版本号(AssemblyVersion.AssemblyFileVersion.AssemblyInformationalVersion)以及版本号中的Re ...

  7. gulp使用小结(二)

    接上篇文章接Gulp使用小结(一) 内容如下: 首先,偶在gulp-demos上已经提交了个较通用的栗子...俺琢磨半天,原准备分阶段搞些 Gulp 套路,但是写完介个栗子之后,觉得已经能覆盖绝大多数 ...

  8. Windows Azure Storage (20) 使用Azure File实现共享文件夹

    <Windows Azure Platform 系列文章目录> Update 2016-4-14.在Azure VM配置FTP和IIS,请参考: http://blogs.iis.net/ ...

  9. 《Entity Framework 6 Recipes》中文翻译系列 (12) -----第三章 查询之使用SQL语句

    翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 3-2使用原生SQL语句更新 问题 你想在实体框架中使用原生的SQL语句,来更新底层 ...

  10. Java伪界面操作数据库的小实例

    首先在Mysql中有两个表fruit和login: package com.zuoye; import java.sql.*; import java.util.*; public class Tes ...