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 相关文章推荐
控制input输入框中提示信息的显示和隐藏的方法
Feb 12 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
Apr 18 Javascript
JavaScript不使用prototype和new实现继承机制
Dec 29 Javascript
jQuery实现form表单元素序列化为json对象的方法
Dec 09 Javascript
JS构造函数与原型prototype的区别介绍
Jul 04 Javascript
JavaScript探测CSS动画是否已经完成的方法
Aug 30 Javascript
Angularjs使用指令做表单校验的方法
Mar 31 Javascript
安装vue-cli报错 -4058 的解决方法
Oct 19 Javascript
js异步上传多张图片插件的使用方法
Oct 22 Javascript
JS module的导出和导入的实现代码
Feb 25 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
May 10 Javascript
js回溯法计算最佳旅行线路代码实例
Sep 11 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 动态添加记录
2009/03/10 PHP
php获取数组元素中头一个数组元素值的实现方法
2014/12/20 PHP
php实现改变图片直接打开为下载的方法
2015/04/14 PHP
PHP中strnatcmp()函数“自然排序算法”进行字符串比较用法分析(对比strcmp函数)
2016/01/07 PHP
php中遍历二维数组并以表格的形式输出的方法
2017/01/03 PHP
PHP编程求最大公约数与最小公倍数的方法示例
2017/05/29 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
IE和Firefox下javascript的兼容写法小结
2008/12/10 Javascript
js作用域及作用域链概念理解及使用
2013/04/15 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
2015/08/15 Javascript
详解基于webpack2.x的vue2.x的多页面站点
2017/08/21 Javascript
vue-router 路由基础的详解
2017/10/17 Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
2017/11/27 Javascript
mongoose更新对象的两种方法示例比较
2017/12/19 Javascript
js中Array对象的常用遍历方法详解
2019/01/17 Javascript
js实现课堂随机点名系统
2019/11/21 Javascript
javascript实现文字跑马灯效果
2020/06/18 Javascript
[49:20]2014 DOTA2国际邀请赛中国区预选赛5.21 CIS VS TongFu
2014/05/22 DOTA
[01:12]快闪回顾DOTA2亚洲邀请赛(DAC) 静候2018新征程开启
2018/03/11 DOTA
web.py获取上传文件名的正确方法
2014/08/26 Python
Python使用pylab库实现绘制直方图功能示例
2018/06/01 Python
Django如何将URL映射到视图
2019/07/29 Python
Python 实现自动获取种子磁力链接方式
2020/01/16 Python
Django自带用户认证系统使用方法解析
2020/11/12 Python
定义css设备类型-Media Queries图表简介及使用方法
2013/01/21 HTML / CSS
linux面试题参考答案(11)
2012/05/01 面试题
会计实习生工作总结的自我评价
2013/10/07 职场文书
市优秀教师事迹材料
2014/02/05 职场文书
2014年财政工作总结
2014/12/10 职场文书
计划生育汇报材料
2014/12/26 职场文书
2015年社区教育工作总结
2015/05/13 职场文书
母亲去世追悼词
2015/06/23 职场文书
员工给公司的建议书
2019/06/24 职场文书
React配置子路由的实现
2021/06/03 Javascript
SQL注入篇学习之盲注/宽字节注入
2022/03/03 MySQL
golang使用map实现去除重复数组
2022/04/14 Golang