简介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 相关文章推荐
JS网络游戏-(模拟城市webgame)提供的一些例子下载
Oct 14 Javascript
jQuery实现鼠标滑过遮罩并高亮显示效果
Jul 16 Javascript
为jquery的ajaxfileupload增加附加参数的方法
Mar 04 Javascript
node.js中Socket.IO的进阶使用技巧
Nov 04 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
Mar 25 Javascript
jQuery插件实现图片轮播特效
Jun 16 Javascript
Bootstrap CSS组件之导航(nav)
Dec 17 Javascript
ES6生成器用法实例分析
Apr 10 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
Aug 14 Javascript
vue-cli构建项目下使用微信分享功能
May 28 Javascript
iview Upload组件多个文件上传的示例代码
Sep 30 Javascript
浅谈es6中的元编程
Dec 01 Javascript
详解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
PHP flock 文件锁详细介绍
2012/12/29 PHP
php将字符串转换成16进制的方法
2015/03/17 PHP
PHP输出图像imagegif、imagejpeg与imagepng函数用法分析
2016/11/14 PHP
关于Curl在Swoole协程中的解决方案详析
2019/09/12 PHP
js类的静态属性和实例属性的理解
2009/10/01 Javascript
从盛大通行证上摘下来的身份证验证js代码
2011/01/11 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
2013/07/18 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
2013/09/06 Javascript
jquery插件开发之实现md5插件
2014/03/17 Javascript
关于JavaScript中name的意义冲突示例介绍
2014/05/29 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
2014/07/28 Javascript
使用jquery给新生的th绑定hover事件的实例
2017/02/10 Javascript
原生js实现旋转木马轮播图效果
2017/02/27 Javascript
vue.js学习之UI组件开发教程
2017/07/03 Javascript
JavaScript无操作后屏保功能的实现方法
2017/07/04 Javascript
angularjs实现table增加tr的方法
2018/02/27 Javascript
Vue不能观察到数组length的变化
2018/06/08 Javascript
JavaScript常用事件介绍
2019/01/21 Javascript
vue自动路由-单页面项目(非build时构建)
2019/04/30 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
2020/11/05 Javascript
[52:07]完美世界DOTA2联赛PWL S3 LBZS vs access 第二场 12.10
2020/12/13 DOTA
复制粘贴功能的Python程序
2008/04/04 Python
Scrapy框架使用的基本知识
2018/10/21 Python
使用python Fabric动态修改远程机器hosts的方法
2018/10/26 Python
Python3+OpenCV2实现图像的几何变换(平移、镜像、缩放、旋转、仿射)
2019/05/13 Python
Python使用正则表达式分割字符串的实现方法
2019/07/16 Python
Python实现获取当前目录下文件名代码详解
2020/03/10 Python
Python ellipsis 的用法详解
2020/11/20 Python
Python 实现二叉查找树的示例代码
2020/12/21 Python
css3 transform属性详解
2014/09/30 HTML / CSS
css3 border旋转时的动画应用
2016/01/22 HTML / CSS
Footshop罗马尼亚:最好的运动鞋选择
2019/09/10 全球购物
垃圾分类的活动方案
2014/08/15 职场文书
卫生保健工作总结2015
2015/05/18 职场文书
Spring Cache和EhCache实现缓存管理方式
2021/06/15 Java/Android
ConstraintValidator类如何实现自定义注解校验前端传参
2021/06/18 Java/Android