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 相关文章推荐
javascript 解决表单仍然提交即使监听处理函数返回false
Mar 14 Javascript
各情景下元素宽高的获取实现代码
Sep 13 Javascript
JS在textarea光标处插入文本的小例子
Mar 22 Javascript
HTTP 304错误的详细讲解
Nov 13 Javascript
javascript调试过程中找不到哪里出错的可能原因
Dec 16 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
Apr 23 Javascript
基于jQuery ligerUI实现分页样式
Sep 18 Javascript
jQuery插件Echarts实现的渐变色柱状图
Mar 23 jQuery
Angular排序实例详解
Jun 28 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
Jun 11 Javascript
Vue两个版本的区别和使用方法(更深层次了解)
Feb 16 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
Jul 09 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函数scandir排除特定目录
2014/06/12 PHP
smarty模板引擎使用内建函数foreach循环取出所有数组值的方法
2015/01/22 PHP
php 生成Tab键或逗号分隔的CSV
2016/09/24 PHP
php模仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(中)
2017/06/11 PHP
php将从数据库中获得的数据转换成json格式并输出的方法
2018/08/21 PHP
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
2013/01/06 Javascript
jQuery中:hidden选择器用法实例
2014/12/30 Javascript
jQuery 回调函数(callback)的使用和基础
2015/02/26 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
2016/09/23 Javascript
Nodejs进阶:如何将图片转成datauri嵌入到网页中去实例
2016/11/21 NodeJs
JS库中的Particles.js在vue上的运用案例分析
2017/09/13 Javascript
微信小程序 input输入及动态设置按钮的实现
2017/10/27 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
2017/12/07 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
2018/03/02 Javascript
详解redux异步操作实践
2018/08/15 Javascript
简单通过settimeout看javascript的运行机制
2019/05/10 Javascript
vue项目前端错误收集之sentry教程详解
2019/05/27 Javascript
Vue中对iframe实现keep alive无刷新的方法
2019/07/23 Javascript
详解解决小程序中webview页面多层history返回问题
2019/08/20 Javascript
2019最新21个MySQL高频面试题介绍
2020/02/06 Javascript
python实现八大排序算法(2)
2017/09/14 Python
Python循环中else,break和continue的用法实例详解
2019/07/11 Python
python3 sorted 如何实现自定义排序标准
2020/03/12 Python
Python 统计位数为偶数的数字代码详解
2020/03/15 Python
Sephora丝芙兰印尼官方网站:购买化妆品和护肤品
2018/07/02 全球购物
双立人美国官方商店:ZWILLING集团餐具和炊具
2020/05/07 全球购物
what is the difference between ext2 and ext3
2013/11/03 面试题
理工大学毕业生自荐信
2013/11/01 职场文书
明信片寄语大全
2014/04/08 职场文书
出国签证在职证明
2014/09/20 职场文书
2015年度员工自我评价范文
2015/03/11 职场文书
2015秋季开学典礼演讲稿
2015/07/16 职场文书
关于五一放假的通知
2015/08/18 职场文书
大学副班长竞选稿
2015/11/21 职场文书
《雷雨》教学反思
2016/02/20 职场文书
学习型家庭事迹材料(2016精选版)
2016/02/29 职场文书