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-Mozilla和IE中的一个函数直接量的问题分析
Aug 12 Javascript
javascript小数计算出现近似值的解决办法
Feb 06 Javascript
js常用代码段收集
Oct 28 Javascript
理解jquery事件冒泡
Jan 03 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
Jan 06 Javascript
基于vue.js实现图片轮播效果
Dec 01 Javascript
详解vue2 $watch要注意的问题
Sep 08 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
Oct 27 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
js序列化和反序列化的使用讲解
Jan 19 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
Mar 01 Javascript
JS自定义对象创建与简单使用方法示例
Jan 15 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
PHP4实际应用经验篇(6)
2006/10/09 PHP
PHP执行批量mysql语句的解决方法
2013/05/02 PHP
基于php冒泡排序算法的深入理解
2013/06/09 PHP
php中sql注入漏洞示例 sql注入漏洞修复
2014/01/24 PHP
windows的文件系统机制引发的PHP路径爆破问题分析
2014/07/28 PHP
php常用文件操作函数汇总
2014/11/22 PHP
PHP导入导出Excel代码
2015/07/07 PHP
php使用json_decode后数字对象转换成了科学计数法的解决方法
2017/02/20 PHP
php实现微信和支付宝支付的示例代码
2020/08/11 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
在JavaScript中监听IME键盘输入事件
2011/05/29 Javascript
jquery ajax jsonp跨域调用实例代码
2013/12/11 Javascript
JSF中confirm弹出框的用法示例介绍
2014/01/07 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
2014/01/13 Javascript
Yii2使用Bootbox插件实现自定义弹窗
2015/04/02 Javascript
Backbone.js的一些使用技巧
2015/07/01 Javascript
js图片翻书效果代码分享
2015/08/20 Javascript
JS原型对象的创建方法详解
2016/06/16 Javascript
JS实现的tab页切换效果完整示例
2018/12/18 Javascript
详解Vue中watch对象内属性的方法
2019/02/01 Javascript
在Vue中创建可重用的 Transition的方法
2020/06/02 Javascript
javascript canvas时钟模拟器
2020/07/13 Javascript
Python下singleton模式的实现方法
2014/07/16 Python
100行Python代码实现自动抢火车票(附源码)
2018/01/11 Python
Python高阶函数、常用内置函数用法实例分析
2019/12/26 Python
python绘制玫瑰的实现代码
2020/03/02 Python
Python正则表达式学习小例子
2020/03/03 Python
Python实现京东抢秒杀功能
2021/01/25 Python
《画家乡》教学反思
2014/04/22 职场文书
二年级评语大全
2014/04/23 职场文书
2014年文学毕业生自我鉴定
2014/04/23 职场文书
求职教师自荐书
2014/06/19 职场文书
幼儿园家长心得体会
2016/01/21 职场文书
JavaScript实现贪吃蛇游戏
2021/06/16 Javascript
Python 阶乘详解
2021/10/05 Python
三种方式清除vue路由跳转router-link的历史记录
2022/04/10 Vue.js