AngularJS的$http服务的应用
$http有很多参数和调用方法，本文只记录比较常用的应用及参数。
$http 服务：只是简单封装了浏览器原生的XMLHttpRequest对象，接收一个参数，这个参数是一个对象，包含了用来生成HTTP请求的配置内容，这个函数返回一个promise对象，具有success和error方法。
$http服务的使用场景：
var promise = $http({
method:"post", // 可以是get,post,put, delete,head,jsonp;常使用的是get,post
url:"./data.json", //请求路径
params:{'name':'lisa'}, //传递参数，字符串map或对象，转化成？name=lisa形式跟在请求路径后面
data:blob, //通常在发送post请求时使用，发送二进制数据，用blob对象。
}).success(function(data){
//响应成功操作
}).error(function(data){
//响应失败（响应以错误状态返回）操作
})
then()函数：可以使用then()函数来处理$http服务的回调，then()函数接受两个可选的函数作为参数，表示success或error状态时的处理，也可以使用success和error回调代替：
then(successFn, errFn, notifyFn),无论promise成功还是失败了，当结果可用之后， then都会立刻异步调用successFn或者
errFn。这个方法始终用一个参数来调用回调函数：结果，或者是拒绝的理由。
在promise被执行或者拒绝之前， notifyFn回调可能会被调用0到多次，以提供过程状态的
提示
promise.then(function(resp){
//响应成功时调用，resp是一个响应对象
}, function(resp) {
// 响应失败时调用，resp带有错误信息
});
then()函数接收的resp（响应对象）包含5个属性：
1. data（字符串或对象）：响应体
2. status:相应http的状态码,如200
3. headers(函数)：头信息的getter函数，可以接受一个参数，用来获取对应名字的值
4. config(对象)：生成原始请求的完整设置对象
5. statusText:相应的http状态文本，如"ok"
或者使用success/error方法，使用
//成功处理
promise.success(function(data, status, headers, config){
// 处理成功的响应
});
// 错误处理
promise.error(function(data, status, headers, config){
// 处理非成功的响应
});
使用实例：
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$http request test </title>
<script src="../js/angular.js"></script>
<script src="app.js"></script>
</head>
<body>
<div data-ng-app="myApp" data-ng-controller="myAppController" data-ng-init="loadData()">
<table>
<thead>
<tr>
<th>名称</th>
<th>属性</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="data in myData">
<td>{{data.name}}</td>
<td>{{data.attr}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
app.js
var myHttpApp = angular.module("myApp",[]);
myHttpApp.controller("myAppController",function($q,$http,$scope){
var deffer = $q.defer();
var data = new Blob([{
"name":"zhangsan"
}])
$scope.loadData = function(){
var promise = $http({
method:"post",
url:"./data.json",
cache: true
}).success(function(data){
deffer.resolve(data);
}).error(function(data){
deffer.reject(data);
})
promise.then(function(data){
$scope.myData = data.data;
})
/*promise.success(function(data){
$scope.myData = data;
})*/
}
})
data.json
[
{"name":"zhangsan","attr":"China"},
{"name":"lisa","attr":"USA"},
{"name":"Bob","attr":"UK"},
{"name":"Jecy","attr":"Jepan"}
]
结果：
调用then()函数时返回的resp对象：
AngularJS的$http服务的应用的更多相关文章
- AngularJs之六（服务）
服务:AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用.AngularJS 内建了30 多个服务. 最常用的服务:$location 服务, $http 服务 ...
- 让AngularJS的$http 服务像jQuery.ajax()一样工作
让AngularJS的$http 服务像jQuery.ajax()一样工作 $http的post . 请求默认的content-Type=application/json . 提交的是json对象的字 ...
- Ⅳ.AngularJS的点点滴滴-- 服务
服务(Angularjs很多方法都是服务组成的) 1.使用service方法创建的单例服务 <html> <script src="http://ajax.googleap ...
- 怎么理解angularjs中的服务？
AngularJS中的服务其实就是提供一种方式抽取共用类库 比如说一些工具类方法,我们传统的做法就是自己写个 utility 类,把相关的工具方法填充到utility里面去,最后把utility类放到 ...
- AngularJS之使用服务封装
AngularJS之使用服务封装可复用代码 创建服务组件 在AngularJS中创建一个服务组件很简单,只需要定义一个具有$get方法的构造函数, 然后使用模块的provider方法进行登记: / ...
- AngularJS 的异步服务测试与Mocking
测试 AngularJS 的异步服务 最近,在做项目时掉进了 AngularJS 异步调用 $q 测试的坑中,直接躺枪了.折腾了许久日子,终于想通了其中的道道,但并不确定是最佳的解决方案,最后还是决定 ...
- AngularJS内建服务以及自定义服务的用法
在AngularJS中, 服务是一个比较重要的部分,它是一个对象或者是函数,可以在你的AngularJS的应用中使用.接下来介绍几种比较常用的内建服务以及自定义服务的方法. [内建服务] (1)loc ...
- 【angularJS】Service服务
AngularJS 中的服务是一个函数或对象.可以创建自己的服务,或使用内建服务. 内置服务 AngularJS 内建了30 多个服务. 1. $location 服务,它可以返回当前页面的 URL ...
- angularJS(三)：服务(Service)、http
一.服务 服务是一个函数或对象,可在你的 AngularJS 应用中使用. 可以创建自己的服务,或使用内建服务 $location 注意 $location 服务是作为一个参数传递到 controll ...
- angularjs provider 供应商服务
今天学习了angularjs的provider的供应商服务,写了个例子(自定义供应商服务,也可使用angularjs内部提供的服务) var starterApp = angular.module(' ...
随机推荐
- 一些小trick~
做质因子分解的时候将先打素数表会节省很多时间
- java学习笔记 (2) —— Struts2类型转换、数据验证重要知识点
1.*Action.conversion-properties 如(point=com.test.Converter.PointListConverter) 具体操作类的配置文件 2.*Action. ...
- 消息机制 - Windows程序设计（SDK）004
消息机制 让编程改变世界 Change the world by program 内容节选: 我们来回顾一下,窗口是怎么从代码中诞生出来的? 1. 首先我们是通过给 WNDCLASS 窗口类结构各个成 ...
- python 3.5 格式化字符串输出
#!/usr/bin/env python #encoding: utf-8 #.strip('里面可以去掉字符串中两边的字符') name = input('name :').strip(' ') ...
- 用root帐号切换其他帐号提示 su: warning: cannot change directory to /home/oracle: Permission denied
用root帐号切换其他帐号提示: 出错原因: 基本上是根目录或者是/home/oracle目录权限的问题 解决办法: 更改根目录权限为755,并保证对应用户主目录的所属用户和所属组一致和用户名一致. ...
- qt 拖拽 修改大小（使用了nativeEvent和winEvent）
http://www.cnblogs.com/swarmbees/p/5621543.html http://blog.sina.com.cn/s/blog_9e59cf590102w3r6.html
- 自定义DTD（myeclipser的XML提示功能）
了解DTD定义详见:http://www.w3school.com.cn/dtd/dtd_elements.asp PS:文本只是简单的介绍,启到抛砖引玉的作用. 1.创建DTD文件 <?xml ...
- logstash 判断接口响应时间发送zabbix告警
input { file { type => "zj_api_access" path => ["/data01/applog_backup/zjzc_log ...
- cf437A The Child and Homework
A. The Child and Homework time limit per test 1 second memory limit per test 256 megabytes input sta ...
- Mac下配置phpredis扩展
最近把开发环境从windows转到Mac下,所有的环境都要重新来配置.由于Mac是基于unix系统的不太熟悉,所以遇到了很多问题. 安装phpredis扩展: 首先,大家先下载phpredis的扩展包 ...