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实现的一个带下拉框功能的文本框
May 08 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
May 18 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
Nov 02 Javascript
深入理解JavaScript中的箭头函数
Jul 28 Javascript
基于jquery实现省市区三级联动效果
Dec 25 Javascript
基于JavaScript实现网页倒计时自动跳转代码
Dec 28 Javascript
JavaScript中三种异步上传文件方式
Mar 06 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
May 20 Javascript
vue动态子组件的两种实现方式
Sep 01 Javascript
vue-dplayer 视频播放器实例代码
Nov 08 Javascript
原生JavaScript实现刮刮乐
Sep 29 Javascript
解决vue init webpack 下载依赖卡住不动的问题
Nov 09 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
全国FM电台频率大全 - 17 湖北省
2020/03/11 无线电
PHP 获取MySQL数据库里所有表的实现代码
2011/07/13 PHP
用PHP解决的一个栈的面试题
2014/07/02 PHP
PHP开发之用微信远程遥控服务器
2018/01/25 PHP
清除网页历史记录,屏蔽后退按钮!
2008/12/22 Javascript
javascript 通用简单的table选项卡实现
2010/05/07 Javascript
解决3.01版的jquery.form.js中文乱码问题的解决方法
2012/03/08 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
2015/09/10 Javascript
在JavaScript中如何解决用execCommand(
2015/10/19 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
2015/11/03 Javascript
jQuery插件passwordStrength密码强度指标详解
2016/06/24 Javascript
js实现微博发布小功能
2017/01/12 Javascript
教你用Cordova打包Vue项目的方法
2017/10/17 Javascript
Node.js搭建小程序后台服务
2018/01/03 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
2018/01/18 Javascript
微信小程序实现全局搜索代码高亮的示例
2018/03/30 Javascript
让Vue也可以使用Redux的方法
2018/05/23 Javascript
微信小程序实现无限滚动列表
2020/05/29 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
2018/11/06 Javascript
Python利用Beautiful Soup模块修改内容方法示例
2017/03/27 Python
Python生成密码库功能示例
2017/05/23 Python
Django框架之DRF 基于mixins来封装的视图详解
2019/07/23 Python
python视频按帧截取图片工具
2019/07/23 Python
Django异步任务线程池实现原理
2019/12/17 Python
Python中的 ansible 动态Inventory 脚本
2020/01/19 Python
PAUL HEWITT手表美国站:德国北部时尚生活配饰品牌,船锚元素
2017/11/18 全球购物
迷你分体式空调:SoGoodToBuy
2018/08/07 全球购物
英国名牌男装店:Standout
2021/02/17 全球购物
C语言中break与continue的区别
2012/07/12 面试题
商务日语专业的自荐信
2014/05/23 职场文书
师德师风个人总结
2015/02/06 职场文书
公司表扬信格式
2015/05/04 职场文书
用基于python的appium爬取b站直播消费记录
2021/04/17 Python
springboot如何初始化执行sql语句
2021/06/22 Java/Android
Consul在linux环境的集群部署
2022/04/08 Servers
SQLyog的下载、安装、破解、配置教程(MySQL可视化工具安装)
2022/09/23 MySQL