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 UI CSS Framework开发Widget的经验
Aug 21 Javascript
JQuery的Ajax跨域请求原理概述及实例
Apr 26 Javascript
JS+CSS实现DIV层的展开、收缩效果
Jan 28 Javascript
Node.js Sequelize如何实现数据库的读写分离
Oct 23 Javascript
令按钮悬浮在(手机)页面底部的实现方法
May 02 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
Jun 08 Javascript
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
Oct 24 Javascript
Es6 Generator函数详细解析
Feb 24 Javascript
JavaScript代码实现txt文件的上传预览功能
Mar 27 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
Aug 12 Javascript
Vue表单之v-model绑定下拉列表功能
May 14 Javascript
vue webpack build资源相对路径的问题及解决方法
Jun 04 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下escape解码函数的实现方法
2010/08/08 PHP
PHP中的函数嵌套层数限制分析
2011/06/13 PHP
PHP数组循环操作详细介绍 附实例代码
2013/02/03 PHP
PHP Global定义全局变量使用说明
2013/08/15 PHP
JavaScript 页面编码与浏览器类型判断代码
2010/06/03 Javascript
JQuery中$之选择器用法介绍
2011/04/05 Javascript
node.js中的fs.utimes方法使用说明
2014/12/15 Javascript
NodeJs的优势和适合开发的程序
2016/08/14 NodeJs
js Canvas实现圆形时钟教程
2016/09/19 Javascript
Angular4学习笔记之新建项目的方法
2017/07/18 Javascript
详解用Node.js实现Restful风格webservice
2017/09/29 Javascript
JS字典Dictionary类定义与用法示例
2019/02/01 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
2019/07/27 Javascript
javascript实现商品图片放大镜
2019/11/28 Javascript
JavaScript原型继承和原型链原理详解
2020/02/04 Javascript
原理深度解析Vue的响应式更新比React快
2020/04/04 Javascript
JS实现手写 forEach算法示例
2020/04/29 Javascript
如何使用three.js 制作一个三维的推箱子游戏
2020/07/29 Javascript
Vue实现简单的拖拽效果
2020/08/25 Javascript
vue编写简单的购物车功能
2021/01/08 Vue.js
介绍Python的Django框架中的静态资源管理器django-pipeline
2015/04/25 Python
python中验证码连通域分割的方法详解
2018/06/04 Python
python实现大转盘抽奖效果
2019/01/22 Python
python虚拟环境的安装和配置(virtualenv,virtualenvwrapper)
2019/08/09 Python
使用pyecharts生成Echarts网页的实例
2019/08/12 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
python通过文本在一个图中画多条线的实例
2020/02/21 Python
Python如何输出警告信息
2020/07/30 Python
python 批量将中文名转换为拼音
2021/02/07 Python
Maxpeedingrods美国:高性能汽车零件
2020/02/14 全球购物
《一株紫丁香》教学反思
2014/02/19 职场文书
财务管理职业生涯规划书
2014/02/26 职场文书
自我鉴定标准格式
2014/03/19 职场文书
授权委托书样本
2014/09/25 职场文书
2016清明节森林防火广播稿
2015/12/17 职场文书
浅谈音视频 pts dts基本概念及理解
2022/08/05 数码科技