angularJS 服务二

$http服务

一 介绍

AngularJS为我们提供了很多种服务，$http用于发送http请求，动态的请求数据。我们可以使用内置的$http服务直接同外部进行通信。$http服务只是简单的封装了浏览器原生的XMLHttpRequest对象。

二 使用

1.链式调用

$http服务是只能接受一个参数的函数，这个参数是一个对象，包含了用来生成HTTP请求的配置内容。这个函数返回一个promise对象，具有success和error两个方法。

返回一个promise对象：

var promise=$http({

method:'GET',

url:"data.json"

});

由于$http方法返回一个promise对象，我们可以在响应返回时用then方法来处理回调。如果使用then方法，会得到一个特殊的参数，它代表了相应对象的成功或失败信息，还可以接受两个可选的函数作为参数。或者可以使用success和error回调代替。

promise.then(function(resp){

//resp是一个响应对象

},function(resp){

//带有错误信息的resp

});

或者这样：

promise.success(function(data,status,config,headers){

//处理成功的响应

});

promise.error(function(data,status,hedaers,config){

//处理失败后的响应

});

then()方法与其他两种方法的主要区别是，它会接收到完整的响应对象，而success()和error()则会对响应对象进行析构。

举例：

HTML部分：

<div ng-controller="myAppCtrl">

            <label>username</label>

            <input type="text" ng-model="username" placeholder="输入"/>

            <pre ng-show="username">

                {{users}}

            </pre>

</div>

JS部分：

var myAppModule = angular.module("myApp",[]);

myAppModule.controller('myAppCtrl',['$scope','$timeout','myService',

                function($scope,$timeout,myService){

                    var timeout;

                    $scope.$watch('username',function(newUserName){

                        console.log("您输入了："+newUserName);

                        if(newUserName){

                            if(timeout){

                                $timeout.cancel(timeout);

                            }

                            timeout = $timeout(function(){

                                myService.userList(newUserName).success(function(data){

                                    console.log(data);

                                    $scope.users = data;

                                });

                            },350);

                        }

                    });

                }

            ]);

 myAppModule.factory('myService',['$http',function($http){

                var doRequest = function(username){

                    return $http({

                        method:'GET',

                        url:'data.json'

                    });

                }

                return {

                    userList:function(username){

                        return doRequest(username);

                    }

                }

            }]);

在相同的路径下建立data.json:

[{

    "name":"test1"

},{

    "name":"test2"

},{

    "name":"test3"

}]

在service部分，注入一个属性 $http ，在方法内部，返回的值是一个对外提供的方法，userList。 外部可以通过 userList(username) 的方式，进行调用。 真正的实现部分放在 doRequest 中，内部就是典型的一个AngularJS的$http请求了，请求会返回url相应的数据。

在对应的控制器中，采用了$watch这种监控方法，监控username属性的变化。当username属性变化时，会触发请求方法。 控制器多注入了一个$timeout变量，该变量用于控制输入的时间。代码观察$timeout(function(...),350);当输入的间隔超过350ms时，就会触发相应函数function(...)。这样可以有效的防止，不停的刷新请求，造成网页的刷新抖动。 在函数内部，调用了我们自己的服务提供的userList方法。当请求成功时，绑定返回值到users中。users会动态的刷新内容。

2.快捷的get请求

$http.get('/api/users.json');

get()方法返回HttpPromise对象。

3.也可以将$http当做函数来使用，这时需要传入一个设置对象，用来说明如何构造XHR对象。

$http({

method:'GET',

url:'/api/users.json',

params:{

'username':'tan'

});

其中设置对象可以包含以下主要的键：

①method

可以是：GET/DELETE/HEAD/JSONP/POST/PUT

②url:绝对的或者相对的请求目标

③params(字符串map或者对象)

这个键的值是一个字符串map或对象，会被转换成查询字符串追加在URL后面。如果值不是字符串，会被JSON序列化。

//参数会转为name=ari的形式

$http({

params:{'name':'ari'}

});

④data(字符串或者对象)

这个对象中包含了将会被当作消息体发送给服务器的数据。通常在发送POST请求时使用。

4.响应对象

angularJS传递给then（）方法的响应对象包含了四个属性。

data :这个数据代表转换过后的响应体（如果定义了转换的话）

status :响应的HTTP状态码

headers :这个函数是头信息的getter函数，可以接受一个参数，用来获取对应名字值