angular 用拦截器统一处理http请求和响应的方法

想使用angularjs里的htpp向后台发送请求,现在有个用户唯一识别的token想要放到headers里面去，也就是{headres:{'token':1}}

index.html里引入以下js：

angular.module('app.factorys',[])
  .factory('httpInterceptor',['$q','$injector','$localStorage',function ($q,$injector,$localStorage) {
    var httpInterceptor = {
      'responseError' : function(response) {
        // ......
        return $q.reject(response);
      },
      'response' : function(response) {
        if (response.status == 21000) {
          // console.log('do something...');
        }
        return response || $q.when(response);
      },
      'request' : function(config) {
        config.headers = config.headers || {};
        if ($localStorage.token) {
          config.headers.token = $localStorage.token;
          // config.headers['X-Access-Token'] = $localStorage.token;
        };

        return config || $q.when(config);

        return config;
      },
      'requestError' : function(config){
        // ......
        return $q.reject(config);
      }
    };
    return httpInterceptor;
  }])

在app里注入factory后，在config里面配置

.config(['$httpProvider',function(){
  $httpProvider.interceptors.push(httpInterceptor);
}])

以上这篇angular 用拦截器统一处理http请求和响应的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Android HTTP发送请求和接收响应的实例代码

    Android HTTP发送请求和接收响应的实例代码

    添加权限 首先要在manifest中加上访问网络的权限: 复制代码 代码如下: <manifest ... > <uses-permission android:name="android.permission.INTERNET" /> ... </manifest> 完整的Manifest文件如下: 复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?>

  • 详解HTTP请求与响应基础及实例

    详解HTTP请求与响应基础及实例 一.HTTP的请求与响应 二.HttpServletRequest和HttpServletResponse对象获取HTTP响应和请求 一.HTTP的请求与响应 HTTP协议(HyperText Transfer Protocol,超文本传输协议)是用于从WWW服务器传输超文本到本地浏览器的传输协议.是客户端和服务器端之间数据传输的格式规范. 通常,由HTTP客户端发起一个请求,服务端一旦收到请求,向客户端返回一个相应(一个请求的发出,有且只有一个响应). (一)

  • python通过get,post方式发送http请求和接收http响应的方法

    本文实例讲述了python通过get,post方式发送http请求和接收http响应的方法.分享给大家供大家参考.具体如下: 测试用CGI,名字为test.py,放在apache的cgi-bin目录下: #!/usr/bin/python import cgi def main(): print "Content-type: text/html\n" form = cgi.FieldStorage() if form.has_key("ServiceCode") a

  • 详解AngularJS用Interceptors来统一处理HTTP请求和响应

    Web 开发中,除了数据操作之外,最频繁的就是发起和处理各种 HTTP 请求了,加上 HTTP 请求又是异步的,如果在每个请求中来单独捕获各种常规错误,处理各类自定义错误,那将会有大量的功能类似的代码,或者使用丑陋的方法在每个请求中调用某几个自定义的函数来处理.这两种方法基本都不是靠谱之选.好在 AngularJS 提供了 Interceptors --拦截战斗机--来对应用内所有的 XHR 请求进行统一处理. 主要功能 Interceptors 有两个处理时机,分别是: 其它程序代码执行 HT

  • Node.js发送HTTP客户端请求并显示响应结果的方法示例

    Node.js发送HTTP客户端请求并显示响应结果的方法示例

    本文实例讲述了Node.js发送HTTP客户端请求并显示响应结果的方法.分享给大家供大家参考,具体如下: wget.js:发送HTTP客户端请求并显示响应的各种结果 options对象描述了将要发出的请求. data事件在数据到达时被触发,error事件在发生错误时被触发. HTTP请求中的数据格式通过MIME协议来声明,例如,提交HTML表单时它的Content-Type会被设置成multipart/form-data. 要在HTTP客户端请求中发送数据,只需调用.write方法并写入符合规范

  • JAVA发送HTTP请求,返回HTTP响应内容,应用及实例代码

    JDK 中提供了一些对无状态协议请求(HTTP )的支持,下面我就将我所写的一个小例子(组件)进行描述:首先让我们先构建一个请求类(HttpRequester ).该类封装了 JAVA 实现简单请求的代码,如下: 复制代码 代码如下: import java.io.BufferedReader;  import java.io.IOException;  import java.io.InputStream;  import java.io.InputStreamReader;  import

  • angular 用拦截器统一处理http请求和响应的方法

    想使用angularjs里的htpp向后台发送请求,现在有个用户唯一识别的token想要放到headers里面去,也就是{headres:{'token':1}} index.html里引入以下js: angular.module('app.factorys',[]) .factory('httpInterceptor',['$q','$injector','$localStorage',function ($q,$injector,$localStorage) { var httpInterc

  • axios使用拦截器统一处理所有的http请求的方法

    axios使用拦截器 在请求或响应被 then 或 catch 处理前拦截它们. http request拦截器 // 添加请求拦截器 axios.interceptors.request.use(function (config) { // 在发送请求之前做些什么 return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); }); http respones拦截器 // 添加响应拦截器 axio

  • SpringBoot拦截器如何获取http请求参数

    SpringBoot拦截器如何获取http请求参数

    1.1.获取http请求参数是一种刚需 我想有的小伙伴肯定有过获取http请求的需要,比如想 前置获取参数,统计请求数据 做服务的接口签名校验 敏感接口监控日志 敏感接口防重复提交 等等各式各样的场景,这时你就需要获取 HTTP 请求的参数或者请求body,一般思路有两种,一种就是自定义个AOP去拦截目标方法,第二种就是使用拦截器.整体比较来说,使用拦截器更灵活些,因为每个接口的请求参数定义不同,使用AOP很难细粒度的获取到变量参数,本文主线是采用拦截器来获取HTTP请求. 1.2.定义拦截器获

  • vue axios拦截器常用之重复请求取消

    引言 上一篇介绍了axios的简单封装,知道了axios拦截器的应用场景和方法,今天来看一下对于响应时间过长且请求次数过高的情况拦截器如何处理. 取消请求的方法 Axios使用内部提供的CancelToken来取消请求 官网示例1:用CancelToken.source工厂方法创建 cancel token,像这样 const CancelToken = axios.CancelToken; const source = CancelToken.source(); axios.get('/use

  • SpringBoot的拦截器中依赖注入为null的解决方法

    该项目是基于SpringBoot框架的Maven项目. 今天在拦截器中处理拦截逻辑时需要使用注解调用其他方法 并且要从配置文件中读取参数.所以我使用了以下注解: @Reference CoreRedisService redisService; @Value("${channel}") private String channel; @Value("${allowMethod}") private String allowMethod; 一个是获取接口的引用,两外两

  • axios封装，使用拦截器统一处理接口，超详细的教程（推荐）

    axios封装，使用拦截器统一处理接口，超详细的教程（推荐）

    最近从0开始搭了一个vue-cli的项目, 虽然axios也可以直接拿来用,但是对接口比较零散,不太好进行维护,也会产生大量的重复代码,所以笔者对axios进行了统一接口处理,废话不多说,直接上代码. 首先,在vue-cli项目的src路径下新建一个axios文件夹,在axios文件夹里新建aps.js和request.js,api.js用于写接口,对axios的封装写在request.js里,项目机构如图: 1. axios统一封装 然后开始统一封装axios, 首先引入axios.qs依赖,

  • 详解为Angular.js内置$http服务添加拦截器的方法

    前言 在Angular框架中,创建团队为使用者进行了Ajax请求的封装,并通过$http服务暴露出相关的接口.Angular在其官方文档中指出, $http服务底层针对Web常见的安全攻击做出了相应的对策,也就是说使用$http服务封装的Ajax为使用者提供了更为安全的保障.作为一个框架,保证框架的可用性,适配性是很有必要的. Angular在设计,实现中也体现出来了这样的良好风格.我们通常在使用Ajax时,有时候希望我们能够在请求发起前或接收到请求后做一些相应的处理工作,比如:在请求发起前,在

  • 详解Angular.js中$http拦截器的介绍及使用

    详解Angular.js中$http拦截器的介绍及使用

    前言 $http service在Angular中用于简化与后台的交互过程,其本质上使用XMLHttpRequest或JSONP进行与后台的数据交互.在与后台的交互过程中,可能会对每条请求发送到Server之前进行预处理(如加入token),或者是在Server返回数据到达客户端还未被处理之前进行预处理(如将非JSON格式数据进行转换):当然还有可能对在请求和响应过程过发生的问题进行捕获处理.所有这些需求在开发中都非常常见,所以Angular为我们提供了$http拦截器,用来实现上述需求. 什么

  • vue拦截器实现统一token,并兼容IE9验证功能

    项目中使用vue搭建前端页面,并通过axios请求后台api接口,完成数据交互.如果验证口令token写在在每次的接口中,也是个不小的体力活,而且也不灵活.这里分享使用vue自带拦截器,给每次请求的头部添加token,而且兼容了IE9. import axios from 'axios'; // 这里的config包含每次请求的内容,在这里把token放到请求头 axios.interceptors.request.use(function (config) { let token = wind

随机推荐