angularjs提供的$q服务是对Promises规范的一个实现。$q服务可以把一段异步的代码封装成同步的样式。

为啥是样式,因为异步还是异步,它并不会柱塞代码,只是看起来像同步代码。

$q.when('abc').then().then();

下面的代码演示了$q的构造函数的使用方法。$q的构造函数接受一个function(resolve,reject)的函数,resolve是成功的回掉,reject是失败的回掉。

通常Ajax请求都是异步的,通过success,failed回掉来处理结果。通过$q服务我们可以把这个ajax请求改写成promise的形式。

当然这个接口是我通过$timeout服务模拟了一个2s回复的ajax请求。

html:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body ng-app="app" ng-controller="ctrl" >
<style>
.valid-error{
color:red
}
</style>
<form name="form" novalidate>
<input type="text" ng-model="id">
<input type="button" value="Test" ng-click='doTest()'>
</form>
</body>
<script src="bower_components/angular/angular.js">
</script>
<html>

javascript:

        var app = angular.module('app',[]);
app.factory('dataService',function($timeout){
var service={};
service.persons=[{id:1,name:'Jim'},{id:2,name:'Tom'},{id:3,name:'Agile'}];
service.getName=function(id,callback,errorCallback){
$timeout(function(){
for(var i in service.persons){
var person = service.persons[i];
if(person.id==id){
callback(person.name);
return;
}
}
errorCallback('can not find person by id: '+id);
},2000);
}; return service;
}); app.controller('ctrl',function($scope,$q,dataService){
$scope.id=''; function getName(id){
return $q(function(r,j){
dataService.getName(id,function(data){
r(data);
},function(data){
j(data);
});
});
}; $scope.doTest=function(){
var id = $scope.id;
getName(id).then(function(data){
alert('Name is '+data);
},function(data){
alert('failed: '+data);
});
} console.log('done'); });

then方法接受2个function作为参数,第一个是resolve,第二个是reject。其实把ajax请求改写成promise并不能体现$q的威力。

改写后代码跟原来的代码没有太大的差别。

no promise:
getName(id,function(){},function());
promise:
getName(id).then(function(){},function(){});

promise形式只是把2个回掉提到了then方法里,只是看起来更同步了一点而已。

其实$http服务本身就是通过$q来实现的promise,所以当你使用$q来做ajax的时候已经非常promise了。

$q最大的好处我觉得在于$q.all方法,它可以等待多个promise完成之后在执行相应的代码,下回分享。

AngularJs $q promise的更多相关文章

  1. angular $q promise详解

    前言 通过本文,你大概能清楚angular promise是个啥,$q又是个啥,以及怎么用它.这里咱们先灌输下promise的思想. 下面写的全是废话,一些看着高逼格其实没什么大作用的概念,想知道$q ...

  2. Nodejs Q promise设计思路

    Nodejs Q promise库 前言 Q库为nodejs提供了一个基于promise的编程方式,从此避免了一层又一层的callback调用.不过Q的灵活性也给我造成了很大困扰,我可以用promis ...

  3. Q promise API简单翻译

    详细API:https://github.com/kriskowal/q/wiki/API-Reference Q提供了promise的一种实现方式,现在在node中用的已经比较多了.因为没有中文的a ...

  4. angularJS $http $q $promise

    一天早晨,爹对儿子说:“宝儿,出去看看天气如何!” 每个星期天的早晨,爹都叫小宝拿着超级望远镜去家附近最高的山头上看看天气走势如何,小宝说没问题,我们可以认为小宝在离开家的时候给了他爹一个promis ...

  5. Q promise的使用

    虽然es6已经出现一段时间了,但是对于没有使用es6的node.js的时候,仍要解决回调金字塔,因此Q还是很有必要的.

  6. [Node.js] Promise,Q及Async

    原文地址:http://www.moye.me/2014/12/27/promise_q_async/ 引子 在使用Node/JS编程的时候,经常会遇到这样的问题:有一连串的异步方法,需要按顺序执行, ...

  7. Promise in AngularJS

    What's promise Angular’s event system provides a lot of power to our Angular apps. One of the most p ...

  8. angular的$q服务和promise模式

    此承诺/延迟(promise/deferred)实现的灵感来自于 Kris Kowal's Q CommonJS Promise建议文档 将承诺(promise) 作为和 异步执行操作(action) ...

  9. angular promise $q 异步调用

    Angular异步调用 Promise和$q的用法 背景 首先说明一下promise异步调用出现的背景: javascript语言是一种单线程模式,就是说一次只能够执行一个任务,如果有多个任务的话就必 ...

随机推荐

  1. WDM驱动加载方式理解

    当PC得知有新设备插入时,总线驱动会创建相应的物理驱动PDO,然后提示有新设备插入,这时候调用相应Driver的AddDevice方法创建功能驱动FDO 下面是一个典型的AddDevice方法 #pr ...

  2. 如何在Windows7上完全卸载Oracle 11g(转)

    http://blog.csdn.net/haishu_zheng/article/details/19180081

  3. AJAX学习随笔

    AJAX名为“啊,贾克斯”,听着挺怪的哈. 主要的技术就是XMLHttpRequest对象和Javascript 度娘的解答: AJAX即“AsynchronousJavascriptAndXML”( ...

  4. 如何让PowerShell显示中文不乱码

    故障描述: 这两天有个部门做了个Survey用来调查一些信息,由于对最后的结果报表有些特殊要求,不得不决定弃用SharePoint Survey自带的Export to spreadsheet功能,改 ...

  5. iOS中assign、copy 、retain等关键字的含义

    iOS中assign.copy .retain等关键字的含义  转自:http://my.oschina.net/majiage/blog/267409 assign: 简单赋值,不更改索引计数cop ...

  6. LoadingView

    // //  LoadingView.h //  蓝桥播报 // //  Created by 小小建 on 15/7/10. //  Copyright (c) 2015年 蓝桥. All righ ...

  7. 比官方教程代码更简短的SignalR Server Broadcast示例

    SignalR是微软ASP.NET技术体系中的新成员. 在www.asp.net网站上的SignalR专区有一篇SignalR的入门级教程<Tutorial: Server Broadcast  ...

  8. Webstorm 10 for mac osx 注册机,序列号,kegen

    小菜最近get到mac体验机会,早就耳闻mac非常适合做开发,于是迫不及待的安装各种开发工具,不知不觉,轮到前端开发神器webstorm了,看了一下官网的价格,心拔凉拔凉的. 果断搜索注册机,搜到的结 ...

  9. Jquery UI - DatePicker 在Dialog中无法自动隐藏的解决思路

    通过Jquery UI Dialog模态展示如下的一个员工编辑页面,但是遇到一个奇怪的问题:点击Start Date的input元素后,其无法失去焦点.从而导致DatePicker控件在选择日期后无法 ...

  10. JS实战 · 零碎笔记

    onclick:单击时触发事件 onmouseover:鼠标进入时触发事件 onmouseout:鼠标离开时触发事件   事件三要素:最基础的内容 事件源:有监听的HTML 标签,能响应事件的HTML ...