浅谈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 相关文章推荐
JavaScript中:表达式和语句的区别[译]
Sep 17 Javascript
CSS+jQuery实现的一个放大缩小动画效果
Sep 24 Javascript
基于canvas实现的钟摆效果完整实例
Jan 26 Javascript
JavaScript导航脚本判断当前导航
Jul 12 Javascript
D3.js实现折线图的方法详解
Sep 21 Javascript
微信开发 使用picker封装省市区三级联动模板
Oct 28 Javascript
那些精彩的JavaScript代码片段
Jan 12 Javascript
jQuery实现导航回弹效果
Feb 27 Javascript
Angular.JS通过指令操作DOM的方法
May 10 Javascript
vue 2.0封装model组件的方法
Aug 03 Javascript
JS常见构造模式实例对比分析
Aug 27 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
Sep 21 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源码之explode使用说明
2011/08/05 PHP
深入php处理整数函数的详解
2013/06/09 PHP
yii2中使用Active Record模式的方法
2016/01/09 PHP
浅谈javascript的原型继承
2012/07/25 Javascript
javascript结合CSS实现苹果开关按钮特效
2015/04/07 Javascript
谈谈AngularJs中的隐藏和显示
2015/12/09 Javascript
JQuery validate插件验证用户注册信息
2016/05/11 Javascript
JS表单数据验证的正则表达式(常用)
2017/02/18 Javascript
关于axios不能使用Vue.use()浅析
2018/01/12 Javascript
JavaScript中.min.js和.js文件的区别讲解
2019/02/13 Javascript
vue+php实现的微博留言功能示例
2019/03/16 Javascript
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
2019/06/18 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
2019/10/31 Javascript
详解vue-flickity的fullScreen功能实现
2020/04/07 Javascript
微信小程序自定义顶部组件customHeader的示例代码
2020/06/03 Javascript
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
详解Python中的日志模块logging
2015/06/19 Python
Python自定义线程池实现方法分析
2018/02/07 Python
如何基于Python爬取隐秘的角落评论
2020/07/02 Python
HTML5探秘:用requestAnimationFrame优化Web动画
2018/06/03 HTML / CSS
用HTML5制作一个简单的桌球游戏的教程
2015/05/12 HTML / CSS
西部世纪面试题
2014/12/05 面试题
前台文员的岗位职责
2013/11/14 职场文书
标准自荐信范文
2014/01/29 职场文书
薪酬专员岗位职责
2014/02/18 职场文书
国际贸易系求职信
2014/08/09 职场文书
党员群众路线个人整改措施思想汇报
2014/10/12 职场文书
健康状况证明模板
2014/10/23 职场文书
遗嘱继承权公证书
2015/01/26 职场文书
社区法制宣传日活动总结
2015/05/05 职场文书
MySQL表的增删改查基础教程
2021/04/07 MySQL
Django rest framework如何自定义用户表
2021/06/09 Python
yolov5返回坐标的方法实例
2022/03/17 Python
Python matplotlib绘制雷达图
2022/04/13 Python
Go微服务项目配置文件的定义和读取示例详解
2022/06/21 Golang