浅谈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 函数速查表
Feb 07 Javascript
计算世界完全对称日的js代码,粗糙版
Nov 04 Javascript
JavaScript数组Array对象增加和删除元素方法总结
Jan 20 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
Aug 12 Javascript
JavaScript 对象深入学习总结(经典)
Sep 29 Javascript
JavaScript代码性能优化总结(推荐)
May 16 Javascript
Angular2 环境配置详细介绍
Sep 21 Javascript
Javascript之图片的延迟加载的实例详解
Jul 24 Javascript
webpack打包非模块化js的方法
Oct 24 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
Jul 31 Javascript
Vue防止白屏添加首屏动画的实例
Oct 31 Javascript
vue-cli脚手架的.babelrc文件用法说明
Sep 11 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中的静态变量的基本用法
2014/03/20 PHP
使用PHP连接多种数据库的实现代码(mysql,access,sqlserver,Oracle)
2016/12/21 PHP
PHP实现的mysql操作类【MySQL与MySQLi方式】
2017/10/07 PHP
JavaScript 语言的递归编程
2010/05/18 Javascript
js模拟select下拉菜单控件的代码
2013/05/08 Javascript
javascript 得到文件后缀名的思路及实现
2020/05/09 Javascript
jQuery中prop()方法用法实例
2015/01/05 Javascript
jQuery中parents()方法用法实例
2015/01/07 Javascript
Javascript节点关系实例分析
2015/05/15 Javascript
使用JQuery中的trim()方法去掉前后空格
2016/09/16 Javascript
nodejs实现发出蜂鸣声音(系统报警声)的方法
2017/01/18 NodeJs
ES6新特性之模块Module用法详解
2017/04/01 Javascript
js获取浏览器的各种属性
2017/04/27 Javascript
js replace 全局替换的操作方法
2018/06/12 Javascript
Python常用的内置序列结构(列表、元组、字典)学习笔记
2016/07/08 Python
Python2.7+pytesser实现简单验证码的识别方法
2017/12/29 Python
python的xpath获取div标签内html内容,实现innerhtml功能的方法
2019/01/02 Python
Python中的异常处理try/except/finally/raise用法分析
2019/02/28 Python
Python基于DB-API操作MySQL数据库过程解析
2020/04/23 Python
python 利用zmail库发送邮件
2020/09/11 Python
python基于opencv 实现图像时钟
2021/01/04 Python
施华洛世奇西班牙官网:SWAROVSKI西班牙
2019/06/06 全球购物
荷兰音乐会和音乐剧门票订购网站:Topticketshop
2019/08/27 全球购物
什么是java序列化,如何实现java序列化
2012/11/14 面试题
天鹅的故事教学反思
2014/02/04 职场文书
中等生评语大全
2014/05/04 职场文书
作文批改评语
2014/12/25 职场文书
英文邀请函
2015/02/02 职场文书
公司清洁工岗位职责
2015/04/15 职场文书
委托收款证明
2015/06/23 职场文书
小学英语教师研修感悟
2015/11/18 职场文书
浅谈mysql返回Boolean类型的几种情况
2021/06/04 MySQL
在Python中如何使用yield
2021/06/07 Python
Go Plugins插件的实现方式
2021/08/07 Golang
python周期任务调度工具Schedule使用详解
2021/11/23 Python
Win11查看设备管理器
2022/04/19 数码科技