简介AngularJS中$http服务的用法


Posted in Javascript onFebruary 06, 2016

我们可以使用内置的$http服务直接同外部进行通信。$http服务只是简单的封装了浏览器原生的XMLHttpRequest对象。

1、链式调用

$http服务是只能接受一个参数的函数,这个参数是一个对象,包含了用来生成HTTP请求的配置内容。这个函数返回一个promise对象,具有success和error两个方法。

$http({
url:'data.json',
method:'GET'
}).success(function(data,header,config,status){
//响应成功
}).error(function(data,header,config,status){
//处理响应失败
});

2、返回一个promise对象

var promise=$http({
method:'GET',
url:"data.json"
});

由于$http方法返回一个promise对象,我们可以在响应返回时用then方法来处理回调。如果使用then方法,会得到一个特殊的参数,它代表了相应对象的成功或失败信息,还可以接受两个可选的函数作为参数。或者可以使用success和error回调代替。

promise.then(function(resp){
//resp是一个响应对象
},function(resp){
//带有错误信息的resp
});

或者这样:

promise.success(function(data,status,config,headers){
//处理成功的响应
});
promise.error(function(data,status,hedaers,config){
//处理失败后的响应
});

then()方法与其他两种方法的主要区别是,它会接收到完整的响应对象,而success()和error()则会对响应对象进行析构。

3、快捷的get请求

①$http.get('/api/users.json');

get()方法返回HttpPromise对象。

还可以发送比如:delete/head/jsonp/post/put 函数内可接受参数具体参照148页

②以再发送jsonp请求举例说明: 为了发送JSONP请求,其中url必须包含JSON_CALLBACK字样。

jsonp(url,config) 其中config是可选的

var promise=$http.jsonp("/api/users.json?callback=JSON_CALLBACK");

4、也可以将$http当做函数来使用,这时需要传入一个设置对象,用来说明如何构造XHR对象。

$http({
method:'GET',
url:'/api/users.json',
params:{
'username':'tan'
});

其中设置对象可以包含以下主要的键:

①method

可以是:GET/DELETE/HEAD/JSONP/POST/PUT

②url:绝对的或者相对的请求目标
③params(字符串map或者对象)
这个键的值是一个字符串map或对象,会被转换成查询字符串追加在URL后面。如果值不是字符串,会被JSON序列化。
比如这个:

//参数会转为?name=ari的形式
$http({
params:{'name':'ari'}
});

④data(字符串或者对象)

这个对象中包含了将会被当作消息体发送给服务器的数据。通常在发送POST请求时使用。

从AngularJS 1.3开始,它还可以在POST请求里发送二进制数据。要发送一个blob对象,你可以简单地通过使用data参数来传递它。
例如:

var blob=new Blob(['Hello world'],{type:'text/plain'});
$http({
method:'POST',
url:'/',
data:blob
});

4、响应对象

AngularJS传递给then()方法的响应对象包含了四个属性。

data

这个数据代表转换过后的响应体(如果定义了转换的话)

status

响应的HTTP状态码

headers

这个函数是头信息的getter函数,可以接受一个参数,用来获取对应名字值

例如,用如下代码获取X-Auth-ID的值:

$http({
method: 'GET',
url: '/api/users.json'
}).then (resp) {
// 读取X-Auth-ID
resp.headers('X-Auth-ID');
});

config

这个对象是用来生成原始请求的完整设置对象。

statusText(字符串)

这个字符串是响应的HTTP状态文本。

5、缓存HTTP请求

默认情况下,$http服务不会对请求进行本地缓存。在发送单独的请求时,我们可以通过向$http请求传入一个布尔值或者一个缓存实例来启用缓存。

$http.get('/api/users.json',{ cache: true })
.success(function(data) {})
.error(function(data) {});

第一次发送请求时,$http服务会向/api/users.json发送一个GET请求。第二次发送同一个GET请求时,$http服务会从缓存中取回请求的结果,而不会真的发送一个HTTP GET请求。

在这个例子里,由于设置了启用缓存,AngularJS默认会使用$cacheFactory,这个服务是AngularJS在启动时自动创建的。

如果想要对AngularJS使用的缓存进行更多的自定义控制,可以向请求传入一个自定义的缓存实例代替true。

下面给大家说下AngularJS $http知识。

AngularJS $http 是一个用于读取web服务器上数据的服务。

$http.get(url) 是用于读取服务器数据的函数。

AngularJS 实例

<div ng-app="myApp" ng-controller="customersCtrl"> 
<ul>
<li ng-repeat="x in names">
{{ x.Name + ', ' + x.Country }}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php")
.success(function(response) {$scope.names = response.records;});
});
</script>
Javascript 相关文章推荐
javascript控制frame,iframe的src属性代码
Dec 31 Javascript
JS运动框架之分享侧边栏动画实例
Mar 03 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
Jun 01 Javascript
JavaScript中ES6 Babel正确安装过程
Jul 18 Javascript
JS实现漂亮的时间选择框效果
Aug 20 Javascript
详解网站中图片日常使用以及优化手法
Jan 09 Javascript
Node.js websocket使用socket.io库实现实时聊天室
Feb 20 Javascript
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
Jun 20 Javascript
Bootstrap提示框效果的实例代码
Jul 12 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
Oct 02 Javascript
js实现时间日期校验
May 26 Javascript
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
详解AngularJS中$http缓存以及处理多个$http请求的方法
Feb 06 #Javascript
JavaScript中数组添加值和访问值常见问题
Feb 06 #Javascript
详解Angularjs filter过滤器
Feb 06 #Javascript
Angularjs中如何使用filterFilter函数过滤
Feb 06 #Javascript
浅析Javascript匿名函数与自执行函数
Feb 06 #Javascript
JS通过Cookie判断页面是否为首次打开
Feb 05 #Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
Feb 05 #Javascript
You might like
第一节--面向对象编程
2006/11/16 PHP
一个PHP日历程序
2006/12/06 PHP
php中文乱码怎么办如何让浏览器自动识别utf-8
2014/01/15 PHP
ThinkPHP框架实现导出excel数据的方法示例【基于PHPExcel】
2018/05/12 PHP
PHP 计算至少是其他数字两倍的最大数的实现代码
2020/05/26 PHP
Javascript load Page,load css,load js实现代码
2010/03/31 Javascript
关于URL中的特殊符号使用介绍
2011/11/03 Javascript
JavaScript取得鼠标绝对位置程序代码介绍
2012/09/16 Javascript
从数据结构的角度分析 for each in 比 for in 快的多
2013/07/07 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
2013/11/07 Javascript
JavaScript导出Excel实例详解
2014/11/25 Javascript
jQuery中clearQueue()方法用法实例
2014/12/29 Javascript
JS实现简单的键盘打字的效果
2015/04/24 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
2015/07/01 Javascript
自定义刻度jQuery进度条及插件
2015/09/02 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
2016/10/12 Javascript
javascript-解决mongoose数据查询的异步操作
2016/12/22 Javascript
ES6中Math对象的部分扩展
2017/02/20 Javascript
websocket+node.js实现实时聊天系统问题咨询
2017/05/17 Javascript
jQuery实现html双向绑定功能示例
2017/10/09 jQuery
详解开源的JavaScript插件化框架MinimaJS
2017/10/26 Javascript
python3实现全角和半角字符转换的方法示例
2017/09/21 Python
Html5新增标签与样式及让元素水平垂直居中
2019/07/11 HTML / CSS
利用HTML5中的Canvas绘制一张笑脸的教程
2015/05/07 HTML / CSS
美国瑜伽服装和装备购物网站:Mukha Yoga
2019/02/22 全球购物
俄罗斯在线大型超市:ТутПросто
2021/01/08 全球购物
shell程序如何生命变量?shell变量是弱变量吗?
2014/11/10 面试题
大学生毕业求职找工作的自我评价
2013/09/29 职场文书
高中毕业自我评价
2014/02/08 职场文书
村安全生产责任书
2014/08/25 职场文书
2016年社会主义核心价值观心得体会
2016/01/21 职场文书
python中pandas.read_csv()函数的深入讲解
2021/03/29 Python
python基础之匿名函数详解
2021/04/21 Python
教你怎么用Python操作MySql数据库
2021/05/31 Python
eclipse创建项目没有dynamic web的解决方法
2021/06/24 Java/Android
python读取并查看npz/npy文件数据以及数据显示方法
2022/04/14 Python