angular $http服务

$http服务

angular内置的$http服务简单的封装了浏览器原生的XMLHttpRequest对象，能够直接同外部进行通讯。

$http服务只能接受一个参数，且该参数是一个对象，这个对象主要包含一些http请求的配置内容。如：

var req = {
    method: 'POST',
    url: 'http://example.com',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    data: { test: 'test' }
}

$http(req).success(function(data,header,config,status){
    //响应成功
    
}).error(function(data,header,config,status){
    //处理响应失败
});

能够看到$http()方法返回的是一个promise对象，咱们也能够在响应返回时用then回调。可是用then回调会获得一个特殊的参数，表明了相应对象的成功或失败信息，还能够接受两个可选的函数做为参数。如：

$http(req).then(function(resp){
    //resp是一个响应对象

},function(resp){
    //带有错误信息的resp

});

then()方法回调和success(),error()回调的区别是，then()会接收到完整的对象，而success()和error()会对响应进行解构。

 

ng中的$http方法

$http 
$http.get 
$http.head 
$http.post 
$http.put 
$http.delete 
$http.jsonp 
$http.patch

$http()的用法 
一些参数和说明

参数	说明
method	请求方法
url	请求地址
params	字符串或者对象，将使用paramserializer序列化而且做为GET请求的参数。
data	字符串或者对象，做为请求信息数据的数据。
headers	对象，字符串或者函数返回表示发送到服务器的HTTP请求头。若是函数的返回值为空，则headers则不发送。
xsrfHeaderName	填充XSRF令牌的HTTP请求头名称
xsrfCookieName	含有XSRF令牌cookie的名字
transformRequest	函数/函数的数组。转换函数或者一个包含转换函数的数组。转换函数获取http请求体和请求头，而且返回他们的转换后的数据（一般是序列化）。
transformResponse	函数/函数的数组。转换函数或者一个包含转换函数的数组。转换函数获取http响应体和响应头，而且返回他们的转换数据（一般是序列化）。
paramSerializer	字符串或者返回字符串的函数。用于编写请求参数（指定为对象）的字符串表示形式的函数。若是指令是字符串，那么将被解释为经过$injector注册的函数，这意味着你能经过注册服务方式建立你本身的序列化程序。默认的序列化是$httpParamSerializer；或者你可使用$httpParamSerializerJQLike。
cache	若是为true，一个默认的缓存将被做为请求的缓存，不然若是存在一个用cacheFactory建立的缓存实例，则将用于缓存。
timeout	数值，毫秒，超时则让请求停止。
withCredentials	boolean，是否设置withcredentials flag的XHR对象。查看更多信息的凭据。
responseType	响应头类型

 

返回的参数：

参数	说明
data	字符串或对象。变换函数变换后的响应体。
status	响应的http状态码。
headers	函数，响应头的getter函数。
config	对象，用于生成请求的配置对象。
statusText	字符串，响应的HTTP状态文本。

 

 

$http.get(url,[config])    $http.delete(url,[donfig])     $http.head(url,[config])    $http.jsonp(url,[config]) 

这四个方法中的参数： 
url：请求地址。 
config：请求配置对象。

 

$http.post(url,data,[config])     $http.put(url,data,[config])     $http.patch(url,data,[config]) 

这三个方法多上面四个多了一个参数data，表示请求内容。 
以上就是$http服务的内容。

 

$http的测试

angular的$http服务比较简单，这里再介绍一下$http服务的测试。 
举一个简单的例子：

var app = angular.module('Application', []);

app.controller('MainCtrl', function($scope, $http) {
    $http.get('Users/users.json').success(function(data){
        $scope.users = data;
    });
    $scope.text = 'Hello World!';
});

咱们主要用angular自带的$httpBackend设置伪后台，试的时候，咱们不须要真实的发送HTTP请求来获取数据。若是能够只测试Service的逻辑，当发送请求时，咱们将这个请求拦截下来，而后返回一个预约义好的数据便可。

describe('MainCtrl', function() {
    //咱们会在测试中使用这个scope
    var scope, $httpBackend;

    //模拟咱们的Application模块并注入咱们本身的依赖
    beforeEach(angular.mock.module('Application'));

    //模拟Controller，而且包含 $rootScope 和 $controller
    beforeEach(angular.mock.inject(function($rootScope, $controller, _$httpBackend_) {
        //设置$httpBackend冲刷$http请求
        $httpBackend = _$httpBackend_;
        $httpBackend.when('GET', 'Users/users.json').respond([{
            id: 1,
            name: 'Bob'
        }, {
            id: 2,
            name: 'Jane'
        }]);
        //建立一个空的 scope
        scope = $rootScope.$new();

        //声明 Controller而且注入已建立的空的 scope
        $controller('MainCtrl', {
            $scope: scope
        });
    }));

    // 测试从这里开始
    it('should have variable text = "Hello World!"', function() {
        expect(scope.text).toBe('Hello World!');
    });
    it('should fetch list of users', function() {
        $httpBackend.flush();
        expect(scope.users.length).toBe(2);
        expect(scope.users[0].name).toBe('Bob');
        //输出结果以方便查看
        for(var i=0;i<scope.users.length;i++){
            console.log(scope.users[i].name);
        }
    });
});

$httpBackend的经常使用方法：

方法	说明
when(method, url, [data], [headers])	测试$http()
whenGET(url, [headers]);	测试$http.get()

同理，还有whenHead(),whenDelete()等等。