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加载读取内容及显示与隐藏div示例
Feb 13 Javascript
JavaScript代码应该放在HTML代码哪个位置比较好?
Oct 16 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
Oct 31 Javascript
JavaScript函数详解
Feb 27 Javascript
jQuery中常用动画效果函数(日常整理)
Sep 17 Javascript
bing Map 在vue项目中的使用详解
Apr 09 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
Mar 09 Javascript
JS实现checkbox互斥(单选)功能示例
May 04 Javascript
vue实现表格过滤功能
Sep 27 Javascript
javascript实现简易计算器功能
Sep 23 Javascript
原生js实现表格翻页和跳转
Sep 29 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
详解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生成xml时添加CDATA标签的方法
2014/10/17 PHP
PHP中is_file()函数使用指南
2015/05/08 PHP
PHP整合七牛实现上传文件
2015/07/03 PHP
PHP微信开发之微信消息自动回复下所遇到的坑
2016/05/09 PHP
PHP实现的数独求解问题示例
2017/04/18 PHP
php curl获取到json对象并转成数组array的方法
2018/05/31 PHP
Laravel框架控制器的request与response用法示例
2019/09/30 PHP
MooTools 1.2中的Drag.Move来实现拖放
2009/09/15 Javascript
网络之美 JavaScript中Get和Set访问器的实现代码
2010/09/19 Javascript
JQuery优缺点分析说明
2011/04/10 Javascript
javascript检测浏览器flash版本的实现代码
2011/12/06 Javascript
js渐变显示渐变消失示例代码
2013/08/01 Javascript
javascript数据结构之串的概念与用法分析
2017/04/12 Javascript
微信小程序后台解密用户数据实例详解
2017/06/28 Javascript
jQuery简介_动力节点Java学院整理
2017/07/04 jQuery
用JS实现一个简单的打砖块游戏
2019/12/11 Javascript
[02:39]DOTA2英雄基础教程 天怒法师
2013/11/29 DOTA
[04:22]DSPL第二期精彩集锦:残血反杀!
2014/12/10 DOTA
python中wx将图标显示在右下角的脚本代码
2013/03/08 Python
python logging 日志轮转文件不删除问题的解决方法
2016/08/02 Python
Python探索之实现一个简单的HTTP服务器
2017/10/28 Python
Python算法之图的遍历
2017/11/16 Python
python时间日期函数与利用pandas进行时间序列处理详解
2018/03/13 Python
利用python Selenium实现自动登陆京东签到领金币功能
2019/10/31 Python
Python Django中间件使用原理及流程分析
2020/06/13 Python
Django如何批量创建Model
2020/09/01 Python
python实现MySQL指定表增量同步数据到clickhouse的脚本
2021/02/26 Python
求职简历的自我评价怎样写好
2013/10/07 职场文书
小区门卫岗位职责
2013/12/31 职场文书
建筑工地门卫岗位职责
2014/04/30 职场文书
服装设计专业自荐信
2014/06/17 职场文书
报效祖国演讲稿
2014/09/15 职场文书
幼儿园园长工作总结2015
2015/05/25 职场文书
初二数学教学反思
2016/02/17 职场文书
MySQL窗口函数的具体使用
2021/11/17 MySQL
解决IDEA翻译插件Translation报错更新TTK失败不能使用
2022/04/24 Python