在AngularJs中设置请求头信息(headers)的方法及不同方法的比较

 更新时间:2018年09月04日 14:05:40   作者:Jocs  
在AngularJs中有三种方式可以设置请求头信息,文中对每种方法给大家介绍的非常详细,选择那种方式可以根据自己的需求,感兴趣的朋友跟随脚本之家小编一起看看吧

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

1、在http服务的在服务端发送请求时,也就是调用

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属性上直接配置。事例如下:

ngular.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中设置请求头信息(headers)的方法及不同方法的比较,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • angularjs实现过滤并替换关键字小功能

    angularjs实现过滤并替换关键字小功能

    这篇文章主要为大家详细介绍了angularjs实现过滤并替换关键字小功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • AngularJS入门教程之Helloworld示例

    AngularJS入门教程之Helloworld示例

    这篇文章主要介绍了AngularJS入门教程之Helloworld示例,结合Helloworld入门示例分析了AngularJS的功能、原理、MVC框架、数据绑定与相关使用技巧,需要的朋友可以参考下
    2016-12-12
  • AngularJS 2.0新特性有哪些

    AngularJS 2.0新特性有哪些

    本文介绍了其在AtScript、改善依赖入驻、Annotations、路由方案等方面的改变。虽然不知道打破原有是否是件好事,不过由于不向后兼容,我们需要为迁移做好计划
    2016-02-02
  • Angular 2.0+ 的数据绑定的实现示例

    Angular 2.0+ 的数据绑定的实现示例

    本篇文章主要介绍了Angular 2.0+ 的数据绑定的实现实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • Angular 项目路径添加指定的访问前缀

    Angular 项目路径添加指定的访问前缀

    这篇文章主要为大家介绍了Angular 项目路径添加指定的访问前缀方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍

    Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍

    这篇文章主要给大家介绍了Angularjs中ng-repeat-start与ng-repeat-end的用法,文章开始先进行了简单的介绍,而后通过完整的实例代码详细给大家介绍这两者的用法,有需要的朋友们可以参考借鉴,下面来一起看看吧。
    2016-12-12
  • angularJS与bootstrap结合实现动态加载弹出提示内容

    angularJS与bootstrap结合实现动态加载弹出提示内容

    这篇文章主要介绍了angularJS与bootstrap结合实现动态加载弹出提示内容,通过bootstrp弹出提示。感兴趣的朋友可以参考下本篇文章
    2015-10-10
  • Web前端框架Angular4.0.0 正式版发布

    Web前端框架Angular4.0.0 正式版发布

    经历了 6 个 RC 版本之后,Angular 发布了 4.0.0 正式版。下面这篇文章主要给大家介绍了关于Web前端框架Angular4.0.0 正式版发布的相关资料,文中介绍的非常详细,需要的朋友们下面来一起看看吧。
    2017-03-03
  • AngularJS入门教程之AngularJS模型

    AngularJS入门教程之AngularJS模型

    这篇文章主要介绍了AngularJS入门教程之AngularJS模型的相关资料,需要的朋友可以参考下
    2016-04-04
  • AngularJS ionic手势事件的使用总结

    AngularJS ionic手势事件的使用总结

    本篇文章主要介绍了AngularJS手势事件的使用总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08

最新评论