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的文字自动截取(提供源代码)
Aug 09 Javascript
jQuery中(function(){})()执行顺序的理解
Mar 05 Javascript
js验证上传图片的方法
May 12 Javascript
Jquery组件easyUi实现表单验证示例
Aug 23 Javascript
ReactNative Image组件使用详解
Aug 07 Javascript
vue侧边栏动态生成下级菜单的方法
Sep 07 Javascript
浅谈Fetch 数据交互方式
Dec 20 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
May 02 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
May 12 Javascript
前端插件之Bootstrap Dual Listbox使用教程
Jul 23 Javascript
vue给对象动态添加属性和值的实例
Sep 09 Javascript
JS高级程序设计之class继承重点详解
Jul 07 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和ACCESS写聊天室(九)
2006/10/09 PHP
for循环连续求和、九九乘法表代码
2012/02/20 PHP
PHP正则匹配反斜杠'\'和美元'$'的方法
2017/02/08 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
2011/12/08 Javascript
JavaScript获取指定元素位置的方法
2015/04/08 Javascript
基于Node.js实现nodemailer邮件发送
2016/01/26 Javascript
javascript 广告移动特效的实现代码
2016/06/25 Javascript
Nodejs 发送Post请求功能(发短信验证码例子)
2017/02/09 NodeJs
Bootstrap3多级下拉菜单
2017/02/24 Javascript
vue 页面加载进度条组件实例
2018/02/05 Javascript
js Array.slice的8种不同用法示例
2019/07/10 Javascript
微信小程序request请求封装,验签代码实例
2019/12/04 Javascript
JavaScript DOM常用操作代码汇总
2020/07/03 Javascript
js对象属性名驼峰式转下划线的实例代码
2020/09/17 Javascript
video.js添加自定义组件的方法
2020/12/09 Javascript
决策树的python实现方法
2014/11/18 Python
python统计字符串中指定字符出现次数的方法
2015/04/04 Python
Python语言的面相对象编程方式初步学习
2016/03/12 Python
Python获取航线信息并且制作成图的讲解
2019/01/03 Python
python如何使用jt400.jar包代码实例
2019/12/20 Python
Django Admin后台添加数据库视图过程解析
2020/04/01 Python
python实现扫雷小游戏
2020/04/24 Python
Python urlopen()参数代码示例解析
2020/12/10 Python
CSS3解决移动页面上点击链接触发色块的问题
2016/06/03 HTML / CSS
巴西最大的在线约会网站:ParPerfeito
2018/07/11 全球购物
LODI女鞋在线商店:阿利坎特的鞋类品牌
2019/02/15 全球购物
澳大利亚网上买书:Angus & Robertson
2019/07/21 全球购物
运动会入场式解说词
2014/02/18 职场文书
校园歌咏比赛主持词
2014/03/18 职场文书
二年级学生评语大全
2014/04/23 职场文书
文明班集体申报材料
2014/05/23 职场文书
2014年城管工作总结
2014/11/20 职场文书
学生个人总结范文
2015/02/15 职场文书
2016年优秀共产党员先进事迹材料
2016/02/29 职场文书
关于JS中的作用域中的问题思考分享
2022/04/06 Javascript