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
Oct 31 Javascript
使用javascript做的一个随机点名程序
Feb 13 Javascript
使用script的src实现跨域和类似ajax效果
Nov 10 Javascript
JavaScript中数组的合并以及排序实现示例
Oct 24 Javascript
基于javascript实现简单的抽奖系统
Apr 15 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
Jul 13 Javascript
JS实现搜索关键词的智能提示功能
Jul 07 Javascript
vue.js组件之间传递数据的方法
Jul 10 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
Sep 11 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
Nov 15 Javascript
react 创建单例组件的方法
Apr 26 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
May 26 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 sybase_fetch_array使用方法
2014/04/15 PHP
PHP实现驼峰样式字符串(首字母大写)转换成下划线样式字符串的方法示例
2017/08/10 PHP
详谈PHP中public,private,protected,abstract等关键字的用法
2017/12/31 PHP
超级兔子让浮动层消失的前因后果
2007/03/09 Javascript
一款JavaScript压缩工具:X2JSCompactor
2007/06/13 Javascript
iis6+javascript Add an Extension File
2007/06/13 Javascript
StringTemplate遇见jQuery冲突的解决方法
2011/09/22 Javascript
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
2012/06/20 Javascript
ECMAScript 创建自己的js类库
2012/11/22 Javascript
如何使用jQUery获取选中radio对应的值(一句代码)
2013/06/03 Javascript
深入理解Javascript作用域与变量提升
2013/12/09 Javascript
JavaScript中的prototype原型学习指南
2016/05/09 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
2016/12/23 Javascript
基于Vue2.0的分页组件
2017/03/16 Javascript
深入理解JavaScript继承的多种方式和优缺点
2017/05/12 Javascript
bootstrap选项卡扩展功能详解
2017/06/14 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
2017/12/18 Javascript
JavaScript 判断iPhone X Series机型的方法
2019/01/28 Javascript
微信小程序如何实现精确的日期时间选择器
2020/01/21 Javascript
vue实现商品列表的添加删除实例讲解
2020/05/14 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
2020/10/31 Javascript
写一个Vue loading 插件
2020/11/09 Javascript
Vue-router中hash模式与history模式的区别详解
2020/12/15 Vue.js
[01:53]3.19 DOTA2发布会 现场精彩Coser表演
2014/03/25 DOTA
[04:29]【TI9采访】OG.N0tail在胜者组决赛后接受采访
2019/08/25 DOTA
Python AES加密实例解析
2018/01/18 Python
基于循环神经网络(RNN)实现影评情感分类
2018/03/26 Python
python3基于OpenCV实现证件照背景替换
2018/07/18 Python
Python WSGI的深入理解
2018/08/01 Python
解决python通过cx_Oracle模块连接Oracle乱码的问题
2018/10/18 Python
野兽派官方旗舰店:THE BEAST 野兽派
2016/08/05 全球购物
承诺书范本
2015/01/21 职场文书
2015年度对口支援工作总结
2015/07/22 职场文书
2016年植树节红领巾广播稿
2015/12/17 职场文书
教师正风肃纪心得体会
2016/01/15 职场文书
python 字典和列表嵌套用法详解
2021/06/29 Python