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，一个默认的
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()等等。

posted @ 2018-04-11 19:17 LittleMoon 阅读(6743) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

李月云

angular $http服务

ng中的$http方法

$http的测试

公告