浅谈AngularJS中$http服务的简单用法


Posted in Javascript onMay 15, 2018

我们可以使用内置的$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。

学习angular,个人推荐书籍《AngularJS权威教程》电子PDF版地址如下: https://3water.com/books/255696.html

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个可绑定数据源的jQuery数据表格插件
Jul 17 Javascript
javascript中String对象的slice()方法分析
Dec 20 Javascript
原创jQuery弹出层插件分享
Apr 02 Javascript
javascript实现的右下角弹窗实例
Apr 24 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
May 06 Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
Dec 08 Javascript
js图片轮播手动切换特效
Jan 12 Javascript
vue中如何实现变量和字符串拼接
Jun 19 Javascript
vue.js评论发布信息可插入QQ表情功能
Aug 08 Javascript
Windows安装Node.js报错:2503、2502的解决方法
Oct 25 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
Mar 01 Javascript
JavaScript实现拖拽盒子效果
Feb 06 Javascript
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
May 15 #Javascript
解决linux下node.js全局模块找不到的问题
May 15 #Javascript
vue :src 文件路径错误问题的解决方法
May 15 #Javascript
利用npm 安装删除模块的方法
May 15 #Javascript
vux uploader 图片上传组件的安装使用方法
May 15 #Javascript
使用webpack搭建react开发环境的方法
May 15 #Javascript
浅谈Node.js 沙箱环境
May 15 #Javascript
You might like
用PHP实现小型站点广告管理
2006/10/09 PHP
php使用cookie保存用户登录的用户名实例
2015/01/26 PHP
学习PHP session的传递方式
2016/06/15 PHP
js 单击式的下拉菜单效果实例
2013/08/13 Javascript
Jquery实现的tab效果可以指定默认显示第几页
2013/10/16 Javascript
JavaScript表单通过正则表达式验证电话号码
2014/03/14 Javascript
jQuery点击输入框显示验证码图片
2016/05/19 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
2016/06/21 Javascript
Bootstrap路径导航与分页学习使用
2017/02/08 Javascript
webpack实现热加载自动刷新的方法
2017/07/30 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
2017/08/17 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
2017/10/16 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
2019/01/06 Javascript
vue-router实现嵌套路由的讲解
2019/01/19 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
2019/06/20 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
2019/11/13 Javascript
vue学习笔记之slot插槽基本用法实例分析
2020/02/01 Javascript
[01:18:21]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
python使用urllib模块和pyquery实现阿里巴巴排名查询
2014/01/16 Python
python自动裁剪图像代码分享
2017/11/25 Python
python距离测量的方法
2018/03/06 Python
Python 列表去重去除空字符的例子
2019/07/20 Python
python使用if语句实现一个猜拳游戏详解
2019/08/27 Python
python读文件的步骤
2019/10/08 Python
python 的topk算法实例
2020/04/02 Python
python中strip(),lstrip(),rstrip()函数的使用讲解
2020/11/17 Python
类、抽象类、接口的差异
2016/06/13 面试题
软件测试工程师笔试题带答案
2015/03/27 面试题
教师自荐信范文
2013/12/09 职场文书
致短跑运动员广播稿
2014/01/09 职场文书
2015年财务部工作总结
2015/04/10 职场文书
2015年项目工作总结
2015/04/29 职场文书
离婚被告代理词
2015/05/23 职场文书
2019初中学生入团申请书
2019/06/27 职场文书
我去timi了,一起去timi是什么意思?
2022/04/13 杂记
在NumPy中深拷贝和浅拷贝相关操作的定义和背后的原理
2022/04/14 Python