脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → AngularJS中$http的应用及参数

AngularJS中$http服务常用的应用及参数

 更新时间：2016年08月22日 16:00:23   投稿：daisy  
大家都知道，AngularJS中的$http有很多参数和调用方法，所以本文只记录了比较常用的应用及参数，方便大家以后使用的时候参考学习，下面一起来看看吧。

前言

$http 服务：只是简单封装了浏览器原生的XMLHttpRequest对象，接收一个参数，这个参数是一个对象，包含了用来生成HTTP请求的配置内容，这个函数返回一个promise对象，具有success和error方法。

$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()函数接受两个可选的函数作为参数，表示success或error状态时的处理，也可以使用success和error回调代替：　

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"}
]

　　结果：

调用then()函数时返回的resp对象：

总结

AngularJS中$http服务常用的应用及参数到这就基本结束了，希望本文的内容能对大家学习使用AngularJS有所帮助。如果有疑问可以留言交流。

您可能感兴趣的文章:

相关文章

  • 如何用DevUI搭建自己的Angular组件库

    如何用DevUI搭建自己的Angular组件库

    DevUI 是一款面向企业中后台产品的开源前端解决方案，它倡导沉浸、灵活、至简的设计价值观，提倡设计者为真实的需求服务，为多数人的设计，拒绝哗众取宠、取悦眼球的设计。如果你正在开发 ToB 的工具类产品，DevUI 将是一个很不错的选择！
    2021-05-05
  • AngularJS基于MVC的复杂操作实例讲解

    AngularJS基于MVC的复杂操作实例讲解

    下面小编就为大家分享一篇AngularJS基于MVC的复杂操作实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • Angularjs之如何在跨域请求中传输Cookie的方法

    Angularjs之如何在跨域请求中传输Cookie的方法

    跨域传输Cookie是需要后台和前台同时做相关处理才能解决的，这篇文章主要介绍了Angularjs之如何在跨域请求中传输Cookie的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • AngularJS constant和value区别详解

    AngularJS constant和value区别详解

    angularJS可以通过constant(name,value)和value(name,value)对于创建服务也是很重要的。他们之间有什么不同呢？今天小编给大家分享AngularJS constant和value区别详解，需要的朋友参考下
    2017-02-02
  • AngularJS中的路由使用及实现代码

    AngularJS中的路由使用及实现代码

    本篇文章主要介绍了AngularJS中的路由使用及实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • angularjs学习笔记之三大模块（modal，controller，view）

    angularjs学习笔记之三大模块（modal，controller，view）

    本文给大家记录的是angularjs的三大模块（modal，controller，view）的使用说明，方便初学者能够顺利的学习angularjs.
    2015-09-09
  • AngularJS 中文API参考手册

    AngularJS 中文API参考手册

    本文主要介绍AngularJS API,这里对AngularJS的指令,事件,全局API等做中文翻译,希望能帮助有需要的小伙伴
    2016-07-07
  • angularJS的radio实现单项二选一的使用方法

    angularJS的radio实现单项二选一的使用方法

    下面小编就为大家分享一篇angularJS的radio实现单项二选一的使用方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • Angular Component属性绑定target和attr.target的区别分析

    Angular Component属性绑定target和attr.target的区别分析

    这篇文章主要介绍了Angular Component属性绑定target和attr.target的区别分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-07-07
  • Angular中封装fancyBox(图片预览)遇到问题小结

    Angular中封装fancyBox(图片预览)遇到问题小结

    这篇文章主要介绍了Angular中封装fancyBox(图片预览)遇到的问题小结,需要的朋友可以参考下
    2017-09-09

最新评论