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 相关文章推荐
accesskey 提交
Jun 26 Javascript
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
Apr 01 Javascript
js获取本机的外网/广域网ip地址完整源码
Aug 12 Javascript
js获取下拉列表框中的value和text的值示例代码
Jan 11 Javascript
jQuery经过一段时间自动隐藏指定元素的方法
Mar 17 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
Dec 23 Javascript
一款简单的jQuery图片标注效果附源码下载
Mar 22 Javascript
Bootstrap整体框架之CSS12栅格系统
Dec 15 Javascript
js获取文件里面的所有文件名(实例)
Oct 17 Javascript
vue实现简单的日历效果
Sep 24 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
May 29 Javascript
解决vue路由name同名,路由重复的问题
Aug 05 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原生模板引擎 最简单的模板引擎
2012/04/25 PHP
php简单备份与还原MySql的方法
2016/05/09 PHP
php图片上传类 附调用方法
2016/05/15 PHP
Symfony2创建基于域名的路由相关示例
2016/11/14 PHP
javascript web页面刷新的方法收集
2009/07/02 Javascript
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
2009/09/09 Javascript
Jquery下的26个实用小技巧(jQuery tips, tricks & solutions)
2010/03/01 Javascript
js 调用本地exe的例子(支持IE内核的浏览器)
2012/12/26 Javascript
使用Raygun对Node.js应用进行错误处理的方法
2015/06/23 Javascript
jQuery验证插件validate使用方法详解
2020/09/13 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
2016/05/30 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
2017/07/24 Javascript
Nodejs中使用phantom将html转为pdf或图片格式的方法
2017/09/18 NodeJs
JS实现不用中间变量temp 实现两个变量值得交换方法
2018/02/04 Javascript
JS实现二维数组横纵列转置的方法
2018/04/17 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
2018/09/15 Javascript
vue 弹框产生的滚动穿透问题的解决
2018/09/21 Javascript
简单实现vue中的依赖收集与响应的方法
2019/02/18 Javascript
Node.js系列之连接DB的方法(3)
2019/08/30 Javascript
ng-alain的sf如何自定义部件的流程
2020/06/12 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
2020/07/22 Javascript
[05:59]带你看看DPC的台前幕后
2021/03/11 DOTA
Python callable()函数用法实例分析
2018/03/17 Python
基于python批量处理dat文件及科学计算方法详解
2018/05/08 Python
Linux下安装python3.6和第三方库的教程详解
2018/11/09 Python
使用Python OpenCV为CNN增加图像样本的实现
2019/06/10 Python
python使用rsa非对称加密过程解析
2019/12/28 Python
Html5新增标签与样式及让元素水平垂直居中
2019/07/11 HTML / CSS
英国领先的男装设计师服装独立零售商:Repertoire Fashion
2020/10/19 全球购物
四群教育工作实施方案
2014/03/26 职场文书
委托公证书范本
2014/04/03 职场文书
品牌推广活动策划方案
2014/08/19 职场文书
2014年国庆节演讲稿
2014/09/02 职场文书
爸爸的三轮车观后感
2015/06/16 职场文书
责任书格式
2019/04/18 职场文书
利用Python实现模拟登录知乎
2022/05/25 Python