AngularJS通过$http和服务器通信详解


Posted in Javascript onSeptember 21, 2016

$http

AngularJS提供了$http服务来同服务端进行通信,$http服务队浏览器的XMLHttpRequest对象进行了封装,让我们可以以ajax的方式来从服务器请求数据。

在AngularJS中与远程HTTP服务器交互时会用一个非常关键的服务-$http。

      1、$http是angular中的一个核心服务,利用浏览器的xmlhttprequest或者via JSONP对象与远程HTTP服务器进行交互。

      2、$http的使用方式和jquery提供的$.ajax操作比较相同,均支持多种method的请求,get、post、put、delete等。

      3、$http的各种方式的请求更趋近于rest风格。

      4、在controller中可通过与$scope同样的方式获取$http对象,e.g. function controller($scope,$http){}

下面进行$http服务的使用说明,调用如下:

$http(config).success(function(data,status,headers,config){}).error(function(data,status,headers,config){});

$http服务是一个接受一个参数的函数,参数的类型是对象,用来配置生成的http的请求,该函数返回一个promise对象

var promise = $http({
 method:'GET',
 url:'/api/user.json'
});

promise.then(function(resp){}, function(resp){})

$http请求的配置对象

$http()接受的配置对象可以包含以下属性:

     method:http请求方式,可以为GET,DELETE,HEAD,JSONP,POST,PUT

     url:字符串,请求的目标

     params:字符串或者对象,会被转换成为查询字符串追加的url后面

     data:在发送post请求时使用,作为消息体发送到服务器

     headers:一个列表,每个元素都是一个函数,返回http头

     xsrfHeaderName(字符串):保存XSFR令牌的http头的名称

     xsrfCookieName:保存XSFR令牌的cookie名称

     transformRequest:函数或者函数数组,用来对http请求的请求体和头信息进行转换,并返回转换后的结果。

     transformResponse:函数或者函数数组,用来对http响应的响应体和头信息进行转换,并返回转换后的结果。

     cache:布尔类型或者缓存对象,设置之后angular会缓存get请求。

     timeout:数值,延迟请求

     responseType:字符串,响应类型。可以为arraybuffer, blob,document,json, text, moz-blob, moz-chunked-text, moz-chunked-

     arraybuffer

$http请求的响应对象

     angular传递给then方法的响应对象包括以下几个属性

     data:转换之后的响应体

     status:http响应状态码

     headers:头信息

     config:生成原始请求的设置对象

     statusText:http响应状态的文本

拦截器

angular中通过拦截器我们可以从全局层面对请求以及响应进行拦截。

使用拦截器之前,我们通过factory()声明一个服务,然后通过$httpProvider注册拦截器。拦截器分为四种,两种成功拦截器,两种失败拦截器。

angular.module('test', []).factory('testInterceptor', function($q){
 var interceptor = {
 'request':function(config){
 return config;
 },
 'response':function(resp){
 return response;
 },
 'requestError':function(rejection){
 return $q.reject(rejection);
 },
 'responseError':function(rejection){
 return rejection
 }
 }
 return interceptor;
})

angular.module('test', []).config(function($httpProvider){
 $httpProvider.interceptors.push('testInterceptor');
})

总结

以上就是这篇文章的全部内容,希望能对大家的学习或者工作带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
json简单介绍
Jun 10 Javascript
Ajax+Json 级联菜单实现代码
Oct 27 Javascript
javaScript如何处理从java后台返回的list
Apr 24 Javascript
JavaScript实现页面跳转的几种常用方式
Nov 28 Javascript
jQuery实现的文字hover颜色渐变效果实例
Feb 20 Javascript
AngularJS 过滤器(自带和自建)详解
Sep 19 Javascript
jQuery图片切换动画特效
Nov 02 Javascript
vue技术分享之你可能不知道的7个秘密
Apr 09 Javascript
解决LayUI数据表格复选框不居中显示的问题
Sep 25 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
Dec 18 Javascript
JS函数进阶之prototy用法实例分析
Jan 15 Javascript
vue+node 实现视频在线播放的实例代码
Oct 19 Javascript
JavaScript 拖拽实例代码
Sep 21 #Javascript
Angularjs中controller的三种写法分享
Sep 21 #Javascript
jQuery中Find选择器用法示例
Sep 21 #Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
Sep 21 #Javascript
Angular2 (RC5) 路由与导航详解
Sep 21 #Javascript
Angular2 (RC4) 路由与导航详解
Sep 21 #Javascript
AngularJS 单元测试(二)详解
Sep 21 #Javascript
You might like
PHP设置images目录不充许http访问的方法
2016/11/01 PHP
基于逻辑运算的简单权限系统(实现) JS 版
2007/03/24 Javascript
jquery自定义滚动条插件示例分享
2014/02/21 Javascript
js判断浏览器是否支持html5
2014/08/17 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
2015/10/13 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
2016/09/06 Javascript
JavaScript、C# URL编码、解码总结
2017/01/21 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
2017/02/20 Javascript
JS实现一个简单的日历
2017/02/22 Javascript
Angularjs的启动过程分析
2017/07/18 Javascript
Angular利用trackBy提升性能的方法
2018/01/26 Javascript
bootstrap与pagehelper实现分页效果
2018/12/29 Javascript
JavaScript实现Tab选项卡切换
2020/02/13 Javascript
学前端,css与javascript重难点浅析
2020/06/11 Javascript
javascript实现时间日期的格式化的方法汇总
2020/08/06 Javascript
js删除指定位置超链接中含有百度与360的标题
2021/01/06 Javascript
python使用cookie库操保存cookie详解
2014/03/03 Python
python实现登陆知乎获得个人收藏并保存为word文件
2015/03/16 Python
Python 数据结构之堆栈实例代码
2017/01/22 Python
详解如何将python3.6软件的py文件打包成exe程序
2018/10/09 Python
Django跨域资源共享问题(推荐)
2020/03/09 Python
python实现ftp文件传输功能
2020/03/20 Python
解决jupyter notebook打不开无反应 浏览器未启动的问题
2020/04/10 Python
Python脚本实现Zabbix多行日志监控过程解析
2020/08/26 Python
CSS3实现时间轴效果
2016/07/11 HTML / CSS
美国真皮手袋品牌:GiGi New York
2017/03/10 全球购物
工程力学专业自荐信范文
2014/03/17 职场文书
产品质量承诺书
2014/03/27 职场文书
幼儿园大班评语大全
2014/04/17 职场文书
小学优秀班干部事迹材料
2014/05/25 职场文书
干部职工纪律作风整改措施思想汇报
2014/10/11 职场文书
党组织领导班子整改方案
2014/10/25 职场文书
毕业生就业推荐表导师评语
2014/12/31 职场文书
python中的plt.cm.Paired用法说明
2021/05/31 Python
能让Python提速超40倍的神器Cython详解
2021/06/24 Python
Oracle数据库事务的开启与结束详解
2022/06/25 Oracle