AngularJS中$http服务常用的应用及参数


Posted in Javascript onAugust 22, 2016

前言

$http 服务:只是简单封装了浏览器原生的XMLHttpRequest对象,接收一个参数,这个参数是一个对象,包含了用来生成HTTP请求的配置内容,这个函数返回一个promise对象,具有successerror方法。

$http服务的使用场景:

var promise = $http({
method:"post",    // 可以是get,post,put, delete,head,jsonp;常使用的是get,post
url:"./data.json", 
  //请求路径
params:{'name':'lisa'}, //传递参数,字符串map或对象,转化成?name=lisa形式跟在请求路径后面
data:blob, 



//通常在发送post请求时使用,发送二进制数据,用blob对象。
}).success(function(data){
//响应成功操作
}).error(function(data){
//响应失败(响应以错误状态返回)操作
})

then()函数:可以使用then()函数来处理$http服务的回调,then()函数接受两个可选的函数作为参数,表示successerror状态时的处理,也可以使用successerror回调代替: 

then(successFn, errFn, notifyFn) ,无论promise成功还是失败了,当结果可用之后, then都会立刻异步调用successFn或者errFn。这个方法始终用一个参数来调用回调函数:结果,或者是拒绝的理由。

promise被执行或者拒绝之前, notifyFn回调可能会被调用0到多次,以提供过程状态的提示

promise.then(function(resp){
//响应成功时调用,resp是一个响应对象
}, function(resp) {
// 响应失败时调用,resp带有错误信息
});

then()函数接收的resp(响应对象)包含5个属性: 

      1. data(字符串或对象):响应体

      2. status:相应http的状态码,如200

      3. headers(函数):头信息的getter函数,可以接受一个参数,用来获取对应名字的值

      4. config(对象):生成原始请求的完整设置对象

      5. statusText:相应的http状态文本,如"ok" 

或者使用success/error方法,使用

//成功处理
promise.success(function(data, status, headers, config){
// 处理成功的响应
});
// 错误处理
promise.error(function(data, status, headers, config){
// 处理非成功的响应
});

  使用实例:

index.html

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>$http request test </title>
 <script src="../js/angular.js"></script>
 <script src="app.js"></script>
</head>
<body>
<div data-ng-app="myApp" data-ng-controller="myAppController" data-ng-init="loadData()">
 <table>
  <thead>
  <tr>
   <th>名称</th>
   <th>属性</th>
  </tr>
  </thead>
  <tbody>
  <tr data-ng-repeat="data in myData">
   <td>{{data.name}}</td>
   <td>{{data.attr}}</td>
  </tr>
  </tbody>
 </table>
</div>
</body>
</html>
 

app.js

var myHttpApp = angular.module("myApp",[]);
myHttpApp.controller("myAppController",function($q,$http,$scope){
  var deffer = $q.defer();
  var data = new Blob([{
    "name":"zhangsan"
  }])
  $scope.loadData = function(){
    var promise = $http({
      method:"post",
      url:"./data.json",
      cache: true
    }).success(function(data){
      deffer.resolve(data);
    }).error(function(data){
      deffer.reject(data);
    })

    promise.then(function(data){
      $scope.myData = data.data;
    })
    /*promise.success(function(data){
      $scope.myData = data;
    })*/
  }
})

data.json

[
 {"name":"zhangsan","attr":"China"},
 {"name":"lisa","attr":"USA"},
 {"name":"Bob","attr":"UK"},
 {"name":"Jecy","attr":"Jepan"}
]

结果:

AngularJS中$http服务常用的应用及参数

调用then()函数时返回的resp对象:

AngularJS中$http服务常用的应用及参数

总结

AngularJS中$http服务常用的应用及参数到这就基本结束了,希望本文的内容能对大家学习使用AngularJS有所帮助。如果有疑问可以留言交流。

Javascript 相关文章推荐
一款JavaScript压缩工具:X2JSCompactor
Jun 13 Javascript
Aptana调试javascript图解教程
Nov 30 Javascript
JavaScript中获取元素索引的函数
Sep 10 Javascript
JS实现随机化快速排序的实例代码
Aug 01 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
May 02 Javascript
jQuery实现美观的多级动画效果菜单代码
Sep 06 Javascript
jquery实现输入框实时输入触发事件代码
Dec 21 Javascript
js实现带三角符的手风琴效果
Mar 01 Javascript
详解使用vue-admin-template的优化历程
May 20 Javascript
浅谈PDF.js使用心得
Jun 07 Javascript
通过函数作用域和块级作用域看javascript的作用域链
Aug 05 Javascript
使用Promise封装小程序wx.request的实现方法
Nov 13 Javascript
详解AngularJS如何实现跨域请求
Aug 22 #Javascript
深入浅析JS Function()构造函数
Aug 22 #Javascript
深入浅析jQuery对象$.html
Aug 22 #Javascript
基于JavaScript实现添加到购物车效果附源码下载
Aug 22 #Javascript
利用原生JS自动生成文章标题树的实例
Aug 22 #Javascript
jQuery使用deferreds串行多个ajax请求
Aug 22 #Javascript
JavaScript代码里的判断小结
Aug 22 #Javascript
You might like
PHP源代码数组统计count分析
2011/08/02 PHP
PHP基于php_imagick_st-Q8.dll实现JPG合成GIF图片的方法
2014/07/11 PHP
PHP处理JSON字符串key缺少双引号的解决方法
2014/09/16 PHP
Yii2 如何在modules中添加验证码的方法
2017/06/19 PHP
thinkPHP框架自动填充原理与用法分析
2018/04/03 PHP
禁止刷新,回退的JS
2006/11/25 Javascript
Javascript操纵Cookie实现购物车程序
2007/02/15 Javascript
js编写trim()函数及正则表达式的运用
2013/10/24 Javascript
js实现发送验证码后的倒计时功能
2015/05/28 Javascript
node.js调用C++开发的模块实例
2015/07/03 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
2017/03/23 Javascript
JavaScript瀑布流布局实现代码
2017/05/06 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
2017/06/16 Javascript
微信小程序自定义组件
2017/08/16 Javascript
jQuery实现table表格checkbox全选的方法分析
2018/07/04 jQuery
jQuery实现获取当前鼠标位置并输出功能示例
2019/01/05 jQuery
微信小程序wxs实现吸顶效果
2020/01/08 Javascript
Python简单实现socket信息发送与监听功能示例
2018/01/03 Python
python3 http提交json参数并获取返回值的方法
2018/12/19 Python
Python I/O与进程的详细讲解
2019/03/08 Python
python矩阵运算,转置,逆运算,共轭矩阵实例
2020/05/11 Python
Numpy中ndim、shape、dtype、astype的用法详解
2020/06/14 Python
Microsoft新加坡官方网站:购买微软最新软件和技术产品
2016/10/28 全球购物
Sunglasses Shop德国站:欧洲排名第一的太阳镜网站
2017/08/01 全球购物
追悼会主持词
2014/03/20 职场文书
警察先进个人事迹材料
2014/05/16 职场文书
技术比武方案
2014/05/19 职场文书
毕业生找工作求职信
2014/08/05 职场文书
竞聘自述材料
2014/08/25 职场文书
医院党员公开承诺书
2014/08/30 职场文书
企业法人授权委托书范本
2014/09/23 职场文书
学校食堂食品安全承诺书
2015/04/29 职场文书
新员工入职感想
2015/08/07 职场文书
导游词之麻姑仙境
2019/11/18 职场文书
万能密码的SQL注入漏洞其PHP环境搭建及防御手段
2021/09/04 SQL Server
「玫瑰之王的葬礼」舞台剧主视觉图公开
2022/03/21 日漫