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 相关文章推荐
基于jQuery的淡入淡出可自动切换的幻灯插件
Aug 24 Javascript
event对象获取方法总结在google浏览器下测试
Nov 03 Javascript
使用js画图之圆、弧、扇形
Jan 12 Javascript
Angular中的Promise对象($q介绍)
Mar 03 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
Sep 05 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
Jan 11 Javascript
JS实现加载时锁定HTML页面元素的方法
Jun 24 Javascript
angularjs使用div模拟textarea文本框的方法
Oct 02 Javascript
javascript实现小型区块链功能
Apr 03 Javascript
详解vue的数据劫持以及操作数组的坑
Apr 18 Javascript
vue实现日历备忘录功能
Sep 24 Javascript
JS精确判断数据类型代码实例
Dec 18 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
ThinkPHP跳转页success及error模板实例教程
2014/07/17 PHP
PHP数组操作类实例
2015/07/11 PHP
PHP执行linux命令常用函数汇总
2016/02/02 PHP
判断目标是否是window,document,和拥有tagName的Element的代码
2010/05/31 Javascript
简易js代码实现计算器操作
2013/04/15 Javascript
可简单避免的三个JS发布错误的详细介绍
2013/08/02 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
2014/05/04 Javascript
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
Nodejs Post请求报socket hang up错误的解决办法
2014/09/25 NodeJs
JS判断网页广告是否被浏览器拦截过滤的代码
2015/04/05 Javascript
JQuery替换DOM节点的方法
2015/06/11 Javascript
基于JavaScript实现动态添加删除表格的行
2016/02/01 Javascript
JS输出空格的简单实现方法
2016/09/08 Javascript
JavaScript 继承详解(五)
2016/10/11 Javascript
jQuery中$.grep() 过滤函数 数组过滤
2016/11/22 Javascript
微信小程序 textarea 详解及简单使用方法
2016/12/05 Javascript
javascript防篡改对象实例详解
2017/04/10 Javascript
分析javascript原型及原型链
2018/03/18 Javascript
webpack4 css打包压缩问题的解决
2018/05/18 Javascript
[01:06:59]完美世界DOTA2联赛PWL S2 Magma vs FTD 第一场 11.29
2020/12/02 DOTA
python安装oracle扩展及数据库连接方法
2017/02/21 Python
Python单体模式的几种常见实现方法详解
2017/07/28 Python
python matplotlib实现将图例放在图外
2020/04/17 Python
Django中和时区相关的安全问题详解
2020/10/12 Python
解决pip安装tensorflow中出现的no module named tensorflow.python 问题方法
2021/02/20 Python
澳大利亚在线家具、灯饰和家居装饰店:LivingStyles
2018/11/20 全球购物
SEPHORA丝芙兰捷克官网:购买香水、化妆品和护肤品
2018/11/26 全球购物
夜大自我鉴定
2013/10/31 职场文书
高中打架检讨书
2014/02/13 职场文书
信用社竞聘演讲稿
2014/05/16 职场文书
知识就是力量演讲稿
2014/09/13 职场文书
会计人员岗位职责
2015/02/03 职场文书
幼儿园心得体会范文
2016/01/21 职场文书
MySQL删除和插入数据很慢的问题解决
2021/06/03 MySQL
Oracle 多表查询基本语法实例
2022/04/18 Oracle
Golang入门之计时器
2022/05/04 Golang