AngularJS HTTP Service

AJAX AngularJS HTTP JavaScript Promise 链式调用

$httpAngularJS提供的一个核心Service,通过浏览器的XMLHttpRequest或JSONP与服务器进行交互。 这是一个非常常用的Service,类似于jQuery提供的AJAX。与jQuery类似,$http也采用了deferred/promise模式,不同的是Angular的deferred/promise模式是由Angular的$qService来提供的。

在Angular应用中尽量使用$http而不是jQuery函数来进行AJAX请求,因为$http会在响应到达时触发Angular更新视图($digest循环)。 与此同时,$http还可以通过$httpBackend来Mock和单元测试。

$http文档参见: https://docs.angularjs.org/api/ng/service/$http

基本使用

如果你熟悉了jQuery的AJAX操作,那么使用$http只是重新记住几个方法名而已。把done, fail, always换成success, error, finally

$http.get('/someUrl')
    .success(function(data, status, headers, config){
    // GET成功时被回调
    })
    .error(function(data, status, headers, config){
    // GET失败时被回调
    });

$http方法返回的是一个由$qService提供的Promise对象,事实上Promise对象有三个通用方法:then, catch, finally。 上述的successerror$http提供的两个额外的方法。Promise的三个方法参数如下:

then(successCallback, errorCallback, notifyCallback);
catch(errorCallback);
finally(callback, notifyCallback);

Promise方法是可以链式调用的。

配置$httpProvider

$http Service定义在ng Module里,由$httpProvider提供。于是我们可以通过设置$httpProvider来配置$http的行为。比如,给HTTP请求插入一个拦截器:

someModule.config(['$httpProvider', function($httpProvider){
    $httpProvider.interceptors.push(function($q, dependency1, dependency2){
        return {
            request: function(config){
                // 这里可以调整HTTP请求的配置
                return config;
            },
            response: function(response){
                // 这里能拿到响应对象,当然也可以更改它
                return response;
            }
        }
    });
}]);

还可以通过设置$httpProviderdefaults属性来进行请求/响应的转换(transformRequest, transformResponse)、设置请求的HTTP头字段(headers)。

更多信息,请参考$httpProvider文档: https://docs.angularjs.org/api/ng/provider/$httpProvider

快捷方法

我们知道在jQuery中,使用$.ajax()可以产生一个HTTP请求,可以任意配置请求的字段。同时jQuery提供了$.get, $.post等更加快捷的函数。 Angular的$http也是这样,可以直接调用$http函数来产生一个高度可配置的HTTP请求:

$http(config);
// config properties:
//    * method
//    * url
//    * params:对象,将被转换为Query字符串(`?key1=value1&key2=value2`)
//    * data:请求体对象
//    ...

也可以使用$http.get, $http.post等方法来快捷地发送一个HTTP请求。常用的方法参数如下:

get(url, [config]);
delete(url, [config]);
post(url, data, [config]);
put(url, data, [config]);
Harttle

致力于简单的、一致的、高效的前端开发

看看这个?