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 相关文章推荐
自己的js工具 Cookie 封装
Aug 21 Javascript
jQuery获取样式中的背景颜色属性值/颜色值
Dec 17 Javascript
Js点击弹出下拉菜单效果实例
Aug 12 Javascript
JavaScript设置首页和收藏页面的小例子
Nov 11 Javascript
js调用后台、后台调用前台等方法总结
Apr 17 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
Jul 29 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
Aug 09 Javascript
js监听键盘事件的方法_原生和jquery的区别详解
Oct 10 Javascript
vue-dialog的弹出层组件
May 25 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
Apr 26 Javascript
详谈表单格式化插件jquery.serializeJSON
Jun 23 jQuery
vue 中 elment-ui table合并上下两行相同数据单元格
Dec 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 数组使用详解 推荐
2011/06/02 PHP
php中计算程序运行时间的类代码
2012/11/03 PHP
基于PHP读取csv文件内容的详解
2013/06/18 PHP
自己写的php curl库实现整站克隆功能
2015/02/12 PHP
PHP创建XML接口示例
2019/07/04 PHP
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
2010/01/15 Javascript
jQuery对表单的操作代码集合
2011/04/06 Javascript
JS简单的图片放大缩小的两种方法
2013/11/11 Javascript
探讨javascript是不是面向对象的语言
2013/11/21 Javascript
JavaScript数据库TaffyDB用法实例分析
2015/07/27 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
2015/12/30 Javascript
Jquery调用iframe父页面中的元素及方法
2016/08/23 Javascript
微信小程序 教程之WXML
2016/10/18 Javascript
NodeJs中express框架的send()方法简介
2017/06/20 NodeJs
JavaScript使用FileReader实现图片上传预览效果
2020/03/27 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
2018/10/20 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
2018/11/06 Javascript
JavaScript基础之静态方法和实例方法分析
2018/12/26 Javascript
JS实现二维数组元素的排列组合运算简单示例
2019/01/28 Javascript
[47:02]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS paiN
2018/03/30 DOTA
python测试驱动开发实例
2014/10/08 Python
浅谈tensorflow中几个随机函数的用法
2018/07/27 Python
pandas 根据列的值选取所有行的示例
2018/11/07 Python
Python语言检测模块langid和langdetect的使用实例
2019/02/19 Python
Django 路由控制的实现
2019/07/17 Python
python读写csv文件的方法
2019/08/13 Python
sklearn+python:线性回归案例
2020/02/24 Python
Python通过kerberos安全认证操作kafka方式
2020/06/06 Python
Python析构函数__del__定义原理解析
2020/11/20 Python
荷兰时尚精品店:Labels Fashion
2020/03/22 全球购物
结婚邀请函范文
2014/01/14 职场文书
教育学习自我评价
2014/02/03 职场文书
黄河象教学反思
2014/02/10 职场文书
毕业生自荐信如何写
2014/03/24 职场文书
涉密人员保密承诺书
2014/05/28 职场文书
「女孩的钓鱼慢活」全新版权绘公布
2022/03/21 日漫