AngularJS的$http服务的应用

$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回调代替: 

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对象:

 

时间: 2024-08-25 20:54:34

AngularJS的$http服务的应用的相关文章

angularjs学习笔记--服务

在angularjs中,服务是一个函数或对象,可在angularjs应用中使用.其中$location服务可以返回当前页面的url地址.要使用它,需要在controller中进行定义,作为一个参数传入到controller中. <!DOCTYPE html> <html lang="en"> <head> <script src="../angular/angular.js"></script> </

Angularjs[13] - 定义服务 $provide 中 provider 方法

服务本身是一个任意的对象,ng提供的服务过程涉及它的依赖注入机制. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div ng-app="myApp"> <div ng-controller=

AngularJs(三) deployd 服务的使用

使用服务建立数据 在AngularJS(二)中,我搭建好了deployd服务,现在启动服务,创建正在的数据(开始是使用模拟数据),使用cmd命令 一.开启Mongodb数据. 贴图: 二:测试是否正常开启,使用mongo命令.在CMD中输入: Mongodb默认建立的数据时test,说明mongodb已经开启. 三. 使用我们搭建好的deployd 服务建立数据,首先是开启服务. -p  表示:我的Mongodb数据库的默认端口是27017. 四.在dpd中输入 dashboard 命令: 后会

【AngularJS】—— 13 服务Service

在AngularJS中有很多的服务,常用的比如$http,$location等等. 本篇文章会介绍一下的内容: 1 $http这种Angular提供的服务的使用 2 如何自定义服务,并总结服务需要注意的几个小点. $http的使用 AngularJS为我们提供了很多种服务,$http用于发送http请求,动态的请求数据. 这样就需要使用web容器来运行代码了,先看看程序源码,视图方面还是跟普通的代码相同: <div ng-controller="myAppCtrl"> &l

AngularJS订阅API服务

本篇使用AngularJS实现订阅某个API服务. 首页大致是: 其中,what's on显示首页内容,Search通过输入关键词调用API服务显示到页面,MyShows显示订阅的内容. Sarch页界面如下: 通过在搜索框中输入关键词,把查询到信息显示在当前页面,并且可以点击订阅和取消订阅按钮. My Shows页界面如下: 显示订阅的内容,并且提供取消订阅按钮. 首先,需要了解API提供方所要求的格式.大致是:http://api.themoviedb.org/3/search/tv?api

Node.js开发入门—使用AngularJS内置服务

在上一篇,"AngularJS简单示例"中演示了一个非常简单的使用Angular的小demo,那篇已经太长,原本要介绍的一些内容只好单另开篇了.这些内容,就是如何使用Angular服务. 我们还是基于"AngularJS简单示例"中的示例来改造一下.新的示例,能从Node.js+Express构造的服务器上获取管理菜单.为了实现这个,需要做几部分改造: 服务器提供adminMenu的下载功能,需要修改app.js,处理路由 修改Angular实现的控制器x-cont

AngularJS开发指南15:AngularJS的创建服务,将服务注入到控制器,管理服务依赖详解

创建服务 虽然AngularJS提供了很多有用的服务,但是如果你要创建一个很棒的应用,你可能还是要写自己的服务.你可以通过在模块中注册一个服务工厂函数,或者通过Module#factory api或者直接通过模块配置函数中的$provide api来实现. 所有的服务都符合依赖注入的原则.它们用一个唯一的名字将自己注册进AngularJS的依赖注入系统(injector),并且声明需要提供给工厂函数的依赖.它们的依赖在测试中可以是虚拟的,这使得它们能很好地被测试. 注册服务 要注册服务,你首先要

AngularJS笔记---注册服务

在前面的笔记中,了解到AngularJS的后台控制可以在Controller里面实现. 可是如果所有的逻辑代码都写到Controller会显得该Controller过于臃肿. 不方便维护, AngularJS提供了一个可以依赖注入的方法.我们可以将逻辑处理封装到Service中,需要调用只需要引入对应的Service即可. Angular 提供了3种方法来创建并注册我们自己的 service. 1.Factory 2.Service 3.Provider 一. Factory: 1. 下面构建了

angularJS: $location 服务

记录下今天的学习笔记: $location服务: 解析地址栏的URL,让用户可以访问应用当前路径所对应的路由. 可修改路径.处理各种形式导航. $location服务对javascript中的window.location对象的API进行了更优雅的封装,并且和angularJS集成在一起. 使用$location服务的最佳场景是:当应用需要在内部进行跳转时候.如:用户注册.修改.或登录后进行的跳转. $location服务并不刷新整个页面.刷新整个页面使用:$window.location对象(

AngularJS中$http服务的简单用法

我们可以使用内置的$http服务直接同外部进行通信.$http服务只是简单的封装了浏览器原生的XMLHttpRequest对象. 1.链式调用 $http服务是只能接受一个参数的函数,这个参数是一个对象,包含了用来生成HTTP请求的 配置内容.这个函数返回一个promise对象,具有success和error两个方法. $http({ url:'data.json', method:'GET' }).success(function(data,header,config,status){ //响