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 相关文章推荐
jQuery实现div浮动层跟随页面滚动效果
Feb 11 Javascript
JavaScript中的console.dir()函数介绍
Dec 29 Javascript
JavaScript函数详解
Feb 27 Javascript
JavaScript使用indexOf获得子字符串在字符串中位置的方法
Apr 06 Javascript
javascript实现简单的html5视频播放器
May 06 Javascript
JS公共小方法之判断对象是否为domElement的实例
Nov 25 Javascript
Vue写一个简单的倒计时按钮功能
Apr 20 Javascript
JavaScript引用类型Date常见用法实例分析
Aug 08 Javascript
laydate如何根据开始时间或者结束时间限制范围
Nov 15 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
Apr 11 Javascript
JS中间件设计模式的深入探讨与实例分析
Apr 11 Javascript
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
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实现文件下载(支持中文文名)
2013/12/04 PHP
php两种无限分类方法实例
2015/04/21 PHP
浅谈PHP中new self()和new static()的区别
2017/08/11 PHP
地震发生中逃生十大法则
2008/05/12 Javascript
jQuery使用技巧简单汇总
2013/04/18 Javascript
Jquery中val()表单取值赋值的实例代码
2013/08/15 Javascript
js 获取浏览器版本以此来调整CSS的样式
2014/06/03 Javascript
JavaScript中的标签语句用法分析
2015/02/10 Javascript
JavaScript动态添加style节点的方法
2015/06/09 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
2015/08/28 Javascript
原生javascript实现图片无缝滚动效果
2016/02/12 Javascript
js canvas仿支付宝芝麻信用分仪表盘
2016/11/16 Javascript
JavaScript 控制字体大小设置的方法
2016/11/23 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
2016/12/08 Javascript
浅谈jQuery操作类数组的工具方法
2016/12/23 Javascript
Vue+Bootstrap收藏(点赞)功能逻辑与具体实现
2020/10/22 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
2021/01/06 Javascript
Vue+Bootstrap实现简易学生管理系统
2021/02/09 Vue.js
[53:43]VP vs NewBee Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
利用python求相邻数的方法示例
2017/08/18 Python
Python3实现的反转单链表算法示例
2019/03/08 Python
详解Python给照片换底色(蓝底换红底)
2019/03/22 Python
Django  ORM 练习题及答案
2019/07/19 Python
python中的RSA加密与解密实例解析
2019/11/18 Python
Python3监控windows,linux系统的CPU、硬盘、内存使用率和各个端口的开启情况详细代码实例
2020/03/18 Python
Django ORM实现按天获取数据去重求和例子
2020/05/18 Python
英国领先的瓷砖专家:Walls and Floors
2018/04/27 全球购物
博柏利美国官方网站:Burberry美国
2020/11/19 全球购物
如何保障Web服务器安全
2014/05/05 面试题
班主任新年寄语
2014/04/04 职场文书
医学检验专业自荐信
2014/09/18 职场文书
优秀少先队员事迹材料
2014/12/24 职场文书
小学教师个人总结
2015/02/05 职场文书
计划生育个人总结
2015/03/02 职场文书
浅谈如何写好演讲稿?
2019/06/12 职场文书
OpenCV-Python实现怀旧滤镜与连环画滤镜
2021/06/09 Python