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的$q模式

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

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

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

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

要创建一个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的执行或者拒绝,而无需修改结果的值。通常就做一些资源的清理工作。

链式请求:  

GitHubService.then(function(data){

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

完整例子:

app.js

angular.module('startApp',[
'service',
'demo-controller'
])

controller.js

 

angular.module('demo-controller',['service'])

.controller('demoCtrl',function(BaseService,$scope,$q){

	BaseService.getNews()
.then(function(success){
$scope.newLists = success.newslist;
},function(error){
console.log(error);
})
})

service.js

angular.module('service',[])

.service('BaseService',baseService);

function baseService($q,$http){
this.page = 1;
this.num = 10;
this.baseUrl = 'http://api.huceo.com/guonei/?key=eea12a5aad62c67d0052a563bc86c9e5'; this.getNews = function(){ var deferred = $q.defer();
//
$http.get(this.baseUrl,{
params:{
key:"eea12a5aad62c67d0052a563bc86c9e5",
num:10,
page:1
}
})
.success(function(success){
deferred.resolve(success);
})
.error(function(error){
deferred.reject(error);
}) return deferred.promise;
}
}

demo.html

<!doctype html>
<html lang="en" ng-app="startApp">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="http://cdn.bootcss.com/angular.js/1.4.0-rc.1/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/service.js"></script>
<script src="js/controller.js"></script>
</head>
<body>
<div ng-controller="demoCtrl">
<ul>
<li ng-repeat="item in newLists">{{item.title}}</li>
</ul>
</div>
</body>
</html>

  

  

  

 

  

  

angular中使用promise的更多相关文章

  1. angular中的promise

    angular中的promise用法 标签(空格分隔): angular 前言 Promise其实是一个规范,用类似then().then()这样的链式调用形式来处理因为异步带来意大利面条式的代码(多 ...

  2. 浅谈angular中的promise

    promise目的就是为了跳出回调地狱.老掉牙的东西,大神轻拍. 举个最简单的例子:请求数据(getData),解析数据(executeData),显示数据(showData). //获取数据 fun ...

  3. 深入理解jQuery、Angular、node中的Promise

    最初遇到Promise是在jQuery中,在jQuery1.5版本中引入了Deferred Object,这个异步队列模块用于实现异步任务和回调函数的解耦.为ajax模块.队列模块.ready事件提供 ...

  4. Angularjs中的promise

    promise 是一种用异步方式处理值的方法,promise是对象,代表了一个函数最终可能的返回值或抛出的异常.在与远程对象打交道非常有用,可以把它们看成一个远程对象的代理. 要在Angular中创建 ...

  5. Angular中的$q的形象解释及深入用法

    作者:寸志链接:https://zhuanlan.zhihu.com/p/19622332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 早上,老爸说:“儿子,天气如何 ...

  6. 形象的讲解angular中的$q与promise(转)

    以下内容摘自http://www.ngnice.com/posts/126ee9cf6ddb68 promise不是angular首创的,作为一种编程模式,它出现在……1976年,比js还要古老得多. ...

  7. promise在angular中的基本使用

    promise在angular中的基本使用 <!DOCTYPE html> <html ng-app="myApp"> <head> <m ...

  8. 原创:形象的讲解angular中的$q与promise

    promise不是angular首创的,作为一种编程模式,它出现在……1976年,比js还要古老得多.promise全称是 Futures and promises.具体的可以参见 http://en ...

  9. Deferred在jQuery和Angular中的使用与简单实现

    Deferred在jQuery和Angular中的使用与简单实现 Deferred是在jQuery1.5版本中加入的,并且jQuery使用它完全重写了AJax,以前也只是偶尔使用.但是上次在使用Ang ...

随机推荐

  1. 洛谷P3942将军令

    啦啦啦,又是五月天的歌------ 题目传送门 那么来分析下题目;给定你一棵树,告诉你一支队伍能管辖的范围,求能覆盖整棵树的最少队伍数. 嘛,如果不会做,第一个想到的肯定是暴搜嘛,但是代码打起来肯定也 ...

  2. 使用kubeadm搭建kubernetes1.10集群 Posted on April 14, 2018

    https://blog.qikqiak.com/post/use-kubeadm-install-kubernetes-1.10/ kubeadm是Kubernetes官方提供的用于快速安装 Kub ...

  3. bWAPP练习--injection篇之HTML Injection - Reflected (GET)

    什么是Injection? injection,中文意思就是注入的意思,常见的注入漏洞就是SQL注入啦,是现在应用最广泛,杀伤力很大的漏洞. 什么是HTML injection? 有交互才会产生漏洞, ...

  4. CentOS中Ctrl+Z、Ctrl+C、Ctrl+D的区别

    Ctrl+C和Ctrl+Z都是中断命令,但作用不同. Ctrl+C是发送SIGINT信号,终止一个进程. Ctrl+Z是发送SIGSTOP信号,挂起一个进程,将作业放置到后台(暂停状态).与此同时,可 ...

  5. 【Nginx】初试反向代理:反向代理的原理和用途

    Nginx是一个轻量级的服务器,是一个俄罗斯的开发者开发的开源软件.Nginx具有占内存小.并发能力高的特点,底层采用epoll(Linux2.6+)和kqueue(FREEBSD)网络I/O模型,相 ...

  6. 【SPOJ 220】Relevant Phrases of Annihilation

    http://www.spoj.com/problems/PHRASES/ 求出后缀数组然后二分. 因为有多组数据,所以倍增求后缀数组时要特判是否越界. 二分答案时的判断要注意优化! 时间复杂度\(O ...

  7. 【分类讨论】【计算几何】【凸包】hihocoder 1582 ACM-ICPC国际大学生程序设计竞赛北京赛区(2017)网络赛 E. Territorial Dispute

    题意:平面上n个点,问你是否存在一种黑白染色方案,使得对于该方案,无法使用一条直线使得黑色点划分在直线一侧,白色点划分在另一侧.如果存在,输出一种方案. 如果n<=2,显然不存在. 如果所有点共 ...

  8. python基础之文件操作,函数

    文件操作 +模式: r+t  w+t  a+t  r+b   w+b  a+b 可读可写,其他功能与人,r,w,a相同 f.seek(offset,whence) 文件指针移动    offest的单 ...

  9. Java后台JSON数据的使用

    1. List集合转换成json代码 List list = new ArrayList(); list.add( "first" ); list.add( "secon ...

  10. Linux下KVM虚拟机基本管理及常用命令(转)

    说明:可能有重复 一.KVM的基本管理 1.查看KVM虚拟机配置文件 #Kvm虚拟机默认配置文件位置 [root@kvm qemu]# pwd /etc/libvirt/qemu [root@kvm ...