浅谈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 相关文章推荐
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
Apr 12 Javascript
jquery tab插件精简版分享
Sep 10 Javascript
Javascript base64编码实现代码
Dec 02 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
Mar 03 Javascript
Sea.JS知识总结
May 05 Javascript
JavaScript数组去重的几种方法效率测试
Oct 23 Javascript
关于JavaScript中事件绑定的方法总结
Oct 26 Javascript
html5+canvas实现支持触屏的签名插件教程
May 08 Javascript
使用veloticy-ui生成文字动画效果
Feb 08 Javascript
详解ES6中的 Set Map 数据结构学习总结
Nov 06 Javascript
vue实现二级导航栏效果
Oct 19 Javascript
OpenLayers实现图层切换控件
Sep 25 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性能优化分析工具XDebug 大型网站调试工具
2011/05/22 PHP
PHP 通过Socket收发十六进制数据的实现代码
2013/08/16 PHP
PHP中仿制 ecshop验证码实例
2017/01/06 PHP
YII框架页面缓存操作示例
2019/04/29 PHP
一些常用且实用的原生JavaScript函数
2010/09/08 Javascript
关于JAVASCRIPT urldecode URL解码的问题
2012/01/08 Javascript
nodejs教程之环境安装及运行
2014/11/21 NodeJs
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
2015/08/13 Javascript
JavaScript构造函数详解
2015/12/27 Javascript
微信小程序 参数传递详解
2016/10/24 Javascript
JS逻辑运算符短路操作实例分析
2018/07/09 Javascript
微信小程序关键字变色实现代码实例
2019/12/13 Javascript
React中使用Vditor自定义图片详解
2020/12/25 Javascript
mustache.js实现首页元件动态渲染的示例代码
2020/12/28 Javascript
python操作xml文件示例
2014/04/07 Python
wxPython框架类和面板类的使用实例
2014/09/28 Python
Python2.7简单连接与操作MySQL的方法
2016/04/27 Python
python脚本爬取字体文件的实现方法
2017/04/29 Python
python2.x实现人民币转大写人民币
2018/06/20 Python
Python使用MyQR制作专属动态彩色二维码功能
2019/06/04 Python
python 进程间数据共享multiProcess.Manger实现解析
2019/09/23 Python
解决python3.6用cx_Oracle库连接Oracle的问题
2020/12/07 Python
Python约瑟夫生者死者小游戏实例讲解
2021/01/04 Python
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
2012/12/30 HTML / CSS
css3中transition属性详解
2014/09/02 HTML / CSS
英国户外装备和冒险服装零售商:alloutdoor
2018/01/30 全球购物
维氏瑞士军刀英国网站:Victorinox英国
2019/07/04 全球购物
The North Face意大利官网:服装、背包和鞋子
2020/06/17 全球购物
是否有自动比较结构的方法
2015/06/03 面试题
Solaris操作系统的线程机制
2012/12/23 面试题
酒店管理专业毕业生推荐信
2013/11/10 职场文书
设备收款委托书范本
2014/10/02 职场文书
高中生期中考试失利检讨书
2014/10/23 职场文书
卖房协议书样本
2014/10/30 职场文书
利用正则表达式匹配浮点型数据
2022/05/30 Java/Android
win11电脑关机鼠标灯还亮怎么解决? win11关机后鼠标灯还亮解决方法
2023/01/09 数码科技