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优化效率 提升性能解决方案
Sep 06 Javascript
js判断样式className同时增加class或删除class
Jan 30 Javascript
js中arguments,caller,callee,apply的用法小结
Jan 28 Javascript
jquery实现ajax提交form表单的方法总结
Mar 03 Javascript
jQuery处理json数据返回数组和输出的方法
Mar 11 Javascript
JS根据生日月份和日期计算星座的简单实现方法
Nov 24 Javascript
jQuery如何跳转到另一个网页 就这么简单
Dec 28 Javascript
js获取css的各种样式并且设置他们的方法
Aug 22 Javascript
使用3D引擎threeJS实现星空粒子移动效果
Sep 13 Javascript
基于element-ui组件手动实现单选和上传功能
Dec 06 Javascript
js实现弹幕飞机效果
Aug 27 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
Sep 17 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学习笔记(三):数据类型转换与常量介绍
2015/04/17 PHP
PHP实现简单ajax Loading加载功能示例
2016/12/28 PHP
php实现获取近几日、月时间示例
2019/07/06 PHP
php设计模式之工厂方法模式分析【星际争霸游戏案例】
2020/01/23 PHP
jQuery实现的一个tab切换效果内部还嵌有切换
2014/08/10 Javascript
一个简单的动态加载js和css的jquery代码
2014/09/01 Javascript
jQuery中slideUp()方法用法分析
2014/12/24 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
2016/12/13 Javascript
js实现点击按钮弹出上传文件的窗口
2016/12/23 Javascript
JS设计模式之惰性模式(二)
2017/09/29 Javascript
js数组方法reduce经典用法代码分享
2018/01/07 Javascript
vue better scroll 无法滚动的解决方法
2018/06/07 Javascript
在angularJs中进行数据遍历的2种方法
2018/10/08 Javascript
浅谈在Vue.js中如何实现时间转换指令
2019/01/06 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
2019/05/14 jQuery
微信小程序如何使用云开发
2019/05/17 Javascript
js实现图片无缝循环轮播
2019/10/28 Javascript
js prototype深入理解及应用实例分析
2019/11/25 Javascript
Javascript Symbol原理及使用方法解析
2020/10/22 Javascript
vue element el-transfer增加拖拽功能
2021/01/15 Vue.js
Python自动化运维和部署项目工具Fabric使用实例
2016/09/18 Python
Python基础知识_浅谈用户交互
2017/05/31 Python
使用Bazel编译TensorBoard教程
2020/02/15 Python
python爬虫分布式获取数据的实例方法
2020/11/26 Python
Python如何使用神经网络进行简单文本分类
2021/02/25 Python
介绍一下HTTP、HTTPS和SSL
2012/12/16 面试题
生物科学专业个人求职信范文
2013/12/07 职场文书
公司财务流程之主管工作流程
2014/03/03 职场文书
高中生评语大全
2014/04/25 职场文书
辅导员评语
2014/05/04 职场文书
英语教育专业自荐信
2014/05/29 职场文书
纪念9.18事变演讲稿
2014/09/14 职场文书
2015年文员个人工作总结
2015/04/09 职场文书
演讲开场白台词大全
2015/05/29 职场文书
Vue3 Composition API的使用简介
2021/03/29 Vue.js
关于Vue中的options选项
2022/03/22 Vue.js