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 判断字符串是否为数字的简单方法
Jul 25 Javascript
js中匿名函数的N种写法
Sep 08 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
Mar 01 Javascript
JS前端框架关于重构的失败经验分享
Mar 17 Javascript
简单的JS时钟实例讲解
Jan 13 Javascript
基于BootStrap环境写jQuery tabs插件
Jul 12 Javascript
jquery 判断selection range 是否在容器中的简单实例
Aug 02 Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
Sep 12 Javascript
JS实现的数组去除重复数据算法小结
Nov 17 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
Jan 02 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
Mar 06 Javascript
微信小程序云开发使用方法新手初体验
May 16 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函数分享之curl方式取得数据、模拟登陆、POST数据
2014/06/04 PHP
php管理nginx虚拟主机shell脚本实例
2014/11/19 PHP
php将日期格式转换成xx天前的格式
2015/04/16 PHP
PHP实现二维数组根据key进行排序的方法
2016/12/30 PHP
PHP 中TP5 Request 请求对象的实例详解
2017/07/31 PHP
PHP实现微信退款的方法示例
2019/03/26 PHP
一个用js实现的页内搜索代码
2007/05/23 Javascript
javascript小数四舍五入多种方法实现
2012/12/23 Javascript
一个JavaScript函数把URL参数解析成Json对象
2014/09/24 Javascript
jQuery中DOM树操作之复制元素的方法
2015/01/23 Javascript
了解Javascript的模块化开发
2015/03/02 Javascript
JavaScript中的splice()方法使用详解
2015/06/09 Javascript
Node.js DES加密的简单实现
2016/07/07 Javascript
Javascript for in的缺陷总结
2017/02/03 Javascript
JavaScript模拟实现封装的三种方式及写法区别
2017/10/27 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
2019/06/24 Javascript
详解Python中heapq模块的用法
2016/06/28 Python
python中requests小技巧
2017/05/10 Python
详解使用 pyenv 管理多个版本 python 环境
2017/10/19 Python
使用python实现哈希表、字典、集合操作
2019/12/22 Python
实例教程 一款纯css3实现的数字统计游戏
2014/11/10 HTML / CSS
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
2017/10/16 HTML / CSS
html5简介及新增功能介绍
2020/05/18 HTML / CSS
ProForm英国站点:健身房和健身器材网上商店
2019/06/05 全球购物
澳大利亚体育和露营装备在线/实体零售商:Find Sports
2020/06/03 全球购物
经济实惠的名牌太阳镜和眼镜:Privé Revaux
2021/02/07 全球购物
大学生个人推荐信范文
2013/11/25 职场文书
蛋糕店创业计划书
2014/05/06 职场文书
重阳节活动总结
2014/08/27 职场文书
升学宴学生答谢词
2015/01/05 职场文书
士兵突击观后感
2015/06/16 职场文书
幼儿园教学反思范文
2016/03/02 职场文书
离婚协议书范本(2016最新版)
2016/03/18 职场文书
简短的人生哲理(38句)
2019/08/13 职场文书
解析MySQL索引的作用
2022/03/03 MySQL
MySQL添加索引特点及优化问题
2022/07/23 MySQL