设置请求头信息的不同方式

原文：http://blog.csdn.net/magiclr/article/details/49643277

在AngularJs中有三种方式可以设置请求头信息：

1、在http服务的服务端发送请求时，也就是调用http()方法时，在config对象中设置请求头信息：

 $http.post('/somePath' , someData , {
        headers : {'Authorization' : authToken}
    }).success(function(data, status, headers, config) {
        //...
    }).error(function(data, status, headers, config ) {
        //...
    });

 

这种方法的好处是针对不同路径的请求，可以个性化配置请求头部；

缺点就是，不同路径请求都需要单独配置。

2、第二种设置请求头信息的方式就是在$httpProvider.defaults.headers属性上直接配置。

angular.module('app', [])
.config(function($httpProvider) {
    $httpProvider.defaults.headers.common = { 'My-Header' : 'value' }
})

 

$httpProvider.defaults.headers有不同的属性，如common、get、post、put等。因此可以在不同的http请求上面添加不同的头信息，common是指所有的请求方式。

这种方式添加请求头信息的优势就是可以给不同请求方式添加相同的请求头信息；

缺点就是不能够为某些请求path添加个性化头信息。

3、第三种设置请求头信息的地方是$httpProvider.interceptors。也就是为请求或响应注册一个拦截器。使用这种方式首先需要定义一个服务。

myModule.factory('authInterceptor', function($rootScope,  $cookies){
    return {
        request: function(config){
            config.headers = config.headers || {};
            if($cookies.get('token')){
                config.headers.authorization = 'Bearer ' + $cookies.get('token');
            }
            return config;
        },
        responseError: function(response){
            // ...
        }
    };
})

 

然后把上面定义的服务注册到$httpProvider.interceptors中。

.config(function($httpProvider){
    $httpProvider.interceptors.push('authInterceptor');
})

 

这样，对于每次请求，不论是get还是post、put。我们都会在请求头信息中加入authorization属性。这种方式在处理验权、授权方面很有用的。缺点就是不能够为特定的请求方式添加请求头信息。

 

下面详细介绍下第三种方法：

AngularJS 提供了 Interceptors ——拦截战斗机——来对应用内所有的 XHR 请求进行统一处理。

主要功能

Interceptors 有两个处理时机，分别是：

• 其它程序代码执行 HTTP 请求之后，在实际从浏览器发出请求之前，即处理请求
• 得到请求的响应之后，在交给其它程序代码处理之前，即处理请求的响应

所以，不难理解它可以用于如下几个方面：

• 全局处理错误
• 统一进行身份验证一类的处理
• 对所有发出去的请求进行预处理
• 对所有收到的响应进行预处理
• 做一些增强用户体验的操作，例如显示一个进度条

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

// 定义一个 Service ，稍等将会把它作为 Interceptors 的处理函数
app.factory('HttpInterceptor', ['$q', HttpInterceptor]);

function HttpInterceptor($q) {
  return {
    request: function(config){
      return config;
    },
    requestError: function(err){
      return $q.reject(err);
    },
    response: function(res){
      return res;
    },
    responseError: function(err){
      if(-1 === err.status) {
        // 远程服务器无响应
      } else if(500 === err.status) {
        // 处理各类自定义错误
      } else if(501 === err.status) {
        // ...
      }
      return $q.reject(err);
    }
  };
}

// 添加对应的 Interceptors
app.config(['$httpProvider', function($httpProvider){
  $httpProvider.interceptors.push(HttpInterceptor);
}]);

实际的 Interceptor 处理函数中， return 了一个包含四个成员的对象，这四个成员都 不是必须 的，可以按实际情况指定一二，分别如下：

• request ：接收一个参数，它是 $http 中的标准 config 对象，同时也需要返回一个标准 config ，此时可以添加各类身份验证信息，同时也可在此启动进度条，config.headers是一个标准的头部，可以获取config.headers设置其头部，然后返回这个config。
• requestError ：当有多个 Interceptor 的时候， requestError 会在前一个 Interceptor 抛出错误或者执行 $q.reject() 时执行，接收的参数就对应的错误
• response ：接受一个请求对象参数，可以不处理就直接返回，此时也可以将进度条显示为成功完成，当然，如果后端 API 返回自定义错误时，HTTP 的状态码仍然是 200 得话，便在这里处理自定义错误，也可以对返回数据做一些处理，注意要将进度条置为完成
• responseError ：这个是重头戏，即可以处理标准的 Http 错误，如服务器没有响应时，或者 PHP 之类的 CGI 经常出现的 502 一类，还可以处理 HTTP 状态码不是 200 的各类自定义错误

上面四个中，前两个是请求的前置处理，后两个是针对请求的响应的处理。

转自：http://www.tuicool.com/articles/eMZBN3