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 选项卡效果(JS与HTML的分离)
Apr 01 Javascript
append和appendTo的区别以及appendChild用法
Dec 24 Javascript
node.js中的fs.lchmodSync方法使用说明
Dec 16 Javascript
JS仿淘宝实现的简单滑动门效果代码
Oct 14 Javascript
javascript实现在网页中运行本地程序的方法
Feb 03 Javascript
解析javascript图片懒加载与预加载的分析总结
Oct 27 Javascript
angular bootstrap timepicker TypeError提示怎么办
Jun 13 Javascript
BootStrap数据表格实例代码
Sep 13 Javascript
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
Nov 28 Javascript
微信小程序用户拒绝授权的处理方法详解
Sep 20 Javascript
JS猜数字游戏实例讲解
Jun 30 Javascript
深入详解JS函数的柯里化
Jun 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
生成缩略图
2006/10/09 PHP
一些关于PHP的知识
2006/11/17 PHP
php强制用户转向www域名的方法
2015/06/19 PHP
laravel学习笔记之模型事件的几种用法示例
2017/08/15 PHP
laravel框架模板之公共模板、继承、包含实现方法分析
2019/08/30 PHP
javascript getElementsByName()的用法说明
2009/07/31 Javascript
js 实现无干扰阴影效果 简单好用(附文件下载)
2009/12/27 Javascript
js下关于onmouseout、事件冒泡的问题经验小结
2010/12/09 Javascript
javascript 45种缓动效果 非常酷
2011/06/28 Javascript
javascript 基础篇4 window对象,DOM
2012/03/14 Javascript
JS打开新窗口的2种方式
2013/04/18 Javascript
将nodejs打包工具整合到鼠标右键的方法
2013/05/11 NodeJs
js 通用订单代码
2013/12/23 Javascript
JS中类或对象的定义说明
2014/03/10 Javascript
使用JavaScript实现旋转的彩圈特效
2015/06/23 Javascript
简单理解vue中el、template、replace元素
2016/10/27 Javascript
Angular.Js中ng-include指令的使用与实现
2017/05/07 Javascript
详解webpack+gulp实现自动构建部署
2017/06/29 Javascript
JS中原始值和引用值的储存方式示例详解
2018/03/23 Javascript
python调用短信猫控件实现发短信功能实例
2014/07/04 Python
Python中的getopt函数使用详解
2015/07/28 Python
python3 requests库文件上传与下载实现详解
2019/08/22 Python
解决django-xadmin列表页filter关联对象搜索问题
2019/11/15 Python
python绘制规则网络图形实例
2019/12/09 Python
PyTorch的自适应池化Adaptive Pooling实例
2020/01/03 Python
面向新手解析python Beautiful Soup基本用法
2020/07/11 Python
Html5移动端弹幕动画实现示例代码
2018/08/27 HTML / CSS
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
2013/06/09 HTML / CSS
澳大利亚家具和家居用品购物网站:Zanui
2018/12/29 全球购物
新加坡领先的在线生活方式和杂货购物网站:EAMART
2019/04/02 全球购物
锐步香港官方网上商店:Reebok香港
2020/11/05 全球购物
企业文化口号
2014/06/12 职场文书
客服专员岗位职责
2015/02/10 职场文书
2015国际残疾人日活动总结
2015/03/24 职场文书
MySql 缓存查询原理与缓存监控和索引监控介绍
2021/07/02 MySQL
光之国的四大叛徒:第一贝利亚导致宇宙毁灭,赛文奥特曼在榜
2022/03/18 日漫