当前位置：首页 > 资讯 > 技术文档

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

时间：2021-09-21 08:32 编辑：来源：阅读：
扫一扫，手机访问

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

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

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){
//响应失败（响应以错误状态返回）操作
})

[code]then()[/code]函数：可以使用[code]then()[/code]函数来处理$http服务的回调，[code]then()[/code]函数接受两个可选的函数作为参数，表示[code]success[/code]或[code]error[/code]状态时的处理，也可以使用[code]success[/code]和[code]error[/code]回调代替：　 [code]then(successFn, errFn, notifyFn) [/code],无论[code]promise[/code]成功还是失败了，当结果可用之后， [code]then[/code]都会立刻异步调用[code]successFn[/code]或者[code]errFn[/code]。这个方法始终用一个参数来调用回调函数：结果，或者是拒绝的理由。在[code]promise[/code]被执行或者拒绝之前， [code]notifyFn[/code]回调可能会被调用0到多次，以提供过程状态的提示

promise.then(function(resp){
//响应成功时调用，resp是一个响应对象
}, function(resp) {
// 响应失败时调用，resp带有错误信息
});

[code]then()[/code]函数接收的resp（响应对象）包含5个属性：　 [b] 1. data（字符串或对象）：[/b]响应体 [b] 2. status:[/b]相应http的状态码,如200 [b]3. headers(函数)：[/b]头信息的getter函数，可以接受一个参数，用来获取对应名字的值 [b]4. config(对象)：[/b]生成原始请求的完整设置对象 [b]5. statusText:[/b]相应的http状态文本，如"ok" 或者使用[code]success/error[/code]方法，使用

//成功处理
promise.success(function(data, status, headers, config){
// 处理成功的响应
});
// 错误处理
promise.error(function(data, status, headers, config){
// 处理非成功的响应
});

[b]　[/b][b]　使用实例：[/b] [b]index.html[/b]

<!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>

[b]app.js[/b]

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

[b]　　结果：[/b] [img]http://files.jb51.net/file_images/article/201608/2016822155833818.png?2016722155844[/img] 调用[code]then()[/code]函数时返回的[code]resp[/code]对象： [img]http://files.jb51.net/file_images/article/201608/2016822155904249.png?2016722155913[/img] [b]总结[/b] AngularJS中$http服务常用的应用及参数到这就基本结束了，希望本文的内容能对大家学习使用AngularJS有所帮助。如果有疑问可以留言交流。

全部评论(0)

上一篇：AngularJS ngModel实现指令与输入直接的数据通信
下一篇：Angular组件化管理实现方法分析

资讯排行榜
更多>>