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 相关文章推荐
JS 退出系统并跳转到登录界面的实现代码
Jun 29 Javascript
js和jquery中循环的退出和继续学习记录
Sep 06 Javascript
js 通过cookie实现刷新不变化树形菜单
Oct 30 Javascript
Javascript基础教程之break和continue语句
Jan 18 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
Nov 29 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
Mar 11 Javascript
在Node.js中使用Javascript Generators详解
May 05 Javascript
简单实现jQuery进度条轮播实例代码
Jun 20 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
Aug 18 Javascript
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
Aug 17 Javascript
详解jQuery中的easyui
Sep 02 jQuery
js实现移动端图片滑块验证功能
Sep 29 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
Terran建筑一览
2020/03/14 星际争霸
php中记录用户访问过的产品,在cookie记录产品id,id取得产品信息
2011/05/04 PHP
浅析php中jsonp的跨域实例
2013/06/21 PHP
php中simplexml_load_string使用实例分享
2014/02/13 PHP
PHP批量检测并去除文件BOM头代码实例
2014/05/08 PHP
CodeIgniter常用知识点小结
2016/05/26 PHP
PHP那些琐碎的知识点(整理)
2017/05/20 PHP
JS 动态加载脚本的4种方法
2009/05/05 Javascript
javascript预览上传图片发现的问题的解决方法
2010/11/25 Javascript
Jquery图形报表插件 jqplot简介及参数详解
2012/10/10 Javascript
SOSO地图API使用(一)在地图上画圆实现思路与代码
2013/01/15 Javascript
禁止拷贝网页内容的js代码
2014/01/22 Javascript
JS动态加载当前时间的方法
2015/02/09 Javascript
JavaScript实现找质数代码分享
2015/03/24 Javascript
JS实现控制表格行内容垂直对齐的方法
2015/03/30 Javascript
JavaScript循环_动力节点Java学院整理
2017/06/28 Javascript
Vue 使用中的小技巧
2018/04/26 Javascript
vue中父子组件注意事项,传值及slot应用技巧
2018/05/09 Javascript
使用vue-router为每个路由配置各自的title
2018/07/30 Javascript
jquery判断滚动条距离顶部的距离方法
2018/09/05 jQuery
微信小程序实现下滑到底部自动翻页功能
2020/03/07 Javascript
详解vue 组件的实现原理
2020/11/12 Javascript
python 实现归并排序算法
2012/06/05 Python
Python时区设置方法与pytz查询时区教程
2013/11/27 Python
Python群发邮件实例代码
2014/01/03 Python
基础的十进制按位运算总结与在Python中的计算示例
2016/06/28 Python
shelve  用来持久化任意的Python对象实例代码
2016/10/12 Python
Python传递参数的多种方式(小结)
2019/09/18 Python
零基础小白多久能学会python
2020/06/22 Python
TensorFlow的环境配置与安装方法
2021/02/20 Python
用html5实现语音搜索框的方法
2014/03/18 HTML / CSS
英国男女豪华配饰和礼品网站:Black.co.uk
2020/02/28 全球购物
美国工业用品采购网站:Zoro.com
2020/10/27 全球购物
个园导游词
2015/02/04 职场文书
高端收音机+蓝牙音箱,JBL TUNER FM带收音蓝牙音箱评测
2021/04/24 无线电
Python按顺序遍历并读取文件夹中文件
2022/04/29 Python