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.Encode手动解码技巧
Jul 14 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
Sep 06 Javascript
JavaScript输入邮箱自动提示实例代码
Jan 13 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
Mar 26 Javascript
JavaScript中的this,call,apply使用及区别详解
Jan 29 Javascript
javascript实现标签切换代码示例
May 22 Javascript
非常实用的js验证框架实现源码 附原理方法
Jun 08 Javascript
原生JS发送异步数据请求
Jun 08 Javascript
浅谈mint-ui loadmore组件注意的问题
Nov 08 Javascript
javascript中new Array()和var arr=[]用法区别
Dec 01 Javascript
react学习笔记之state以及setState的使用
Dec 07 Javascript
使用selenium抓取淘宝的商品信息实例
Feb 06 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操作memcache缓存的基础方法示例
2017/08/02 PHP
科讯商业版中用到的ajax空间与分页函数
2007/09/02 Javascript
jquery 弹出登录窗口实现代码
2009/12/24 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
2011/10/21 Javascript
利用jq让你的div居中的好方法分享
2013/11/21 Javascript
JS中判断null、undefined与NaN的方法
2014/03/26 Javascript
js闭包的用途详解
2014/11/09 Javascript
jquery实现可点击伸缩与展开的菜单效果代码
2015/08/31 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
2016/02/17 Javascript
jQuery子元素过滤选择器用法示例
2016/09/09 Javascript
canvas绘制七巧板
2017/02/03 Javascript
vue嵌套路由与404重定向实现方法分析
2018/05/04 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
2018/08/17 Javascript
使用vue制作滑动标签
2019/09/21 Javascript
浅谈Vue.set实际上是什么
2019/10/17 Javascript
分析在Python中何种情况下需要使用断言
2015/04/01 Python
用Python的Django框架编写从Google Adsense中获得报表的应用
2015/04/17 Python
python 实现一个贴吧图片爬虫的示例
2017/10/12 Python
Python闭包函数定义与用法分析
2018/07/20 Python
Python递归函数 二分查找算法实现解析
2019/08/12 Python
python查看数据类型的方法
2019/10/12 Python
Python生成六万个随机,唯一的8位数字和数字组成的随机字符串实例
2020/03/03 Python
澳大利亚最受欢迎的女士度假服装:Kabana Shop
2020/10/10 全球购物
什么叫应用程序域?什么是托管代码?什么是强类型系统?什么是装箱和拆箱?什么是重载?CTS、CLS和CLR分别作何解释?
2012/05/23 面试题
为什么需要版本控制
2016/10/28 面试题
农田水利实习自我鉴定
2013/09/19 职场文书
优秀体育委员自荐书
2014/01/31 职场文书
学校庆元旦歌咏比赛主持词
2014/03/18 职场文书
化学专业自荐信
2014/05/28 职场文书
小学学习雷锋活动总结
2014/07/03 职场文书
关于感恩的演讲稿500字
2014/08/26 职场文书
社会体育专业大学生职业生涯规划书
2014/09/17 职场文书
教师四风问题对照检查材料
2014/09/26 职场文书
领导干部群众路线对照检查材料
2014/11/05 职场文书
2015年骨干教师工作总结
2015/05/26 职场文书
2015年国庆节寄语
2015/08/17 职场文书