AngularJS HTTP Service

06/05 2015

$http是AngularJS提供的一个核心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。上述的success和error是$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;
            }
        }
    });
}]);

还可以通过设置$httpProvider的defaults属性来进行请求/响应的转换（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]);

本文采用知识共享署名 4.0 国际许可协议（CC-BY 4.0）进行许可，转载注明来源即可： https://harttle.land/2015/06/05/angular-http.html。如有疏漏、谬误、侵权请通过评论或邮件指出。

AngularJS HTTP Service

基本使用

配置$httpProvider

快捷方法

配置`$httpProvider`