Axios使用拦截器全局处理请求重试

Axios拦截器

Axios提供了拦截器的接口,让我们能够全局处理请求和响应。Axios拦截器会在Promise的then和catch调用前拦截到。

请求拦截示例

axios.interceptors.request.use(function (config) {
    // 在发起请求请做一些业务处理
    return config;
  }, function (error) {
    // 对请求失败做处理
    return Promise.reject(error);
  });

  响应拦截示例

axios.interceptors.response.use(function (response) {
    // 对响应数据做处理
    return response;
  }, function (error) {
    // 对响应错误做处理
    return Promise.reject(error);
  });

  

Axios实现请求重试

在某些情况(如请求超时),我们可能会希望能够重新发起请求。这时可以在响应拦截器做下处理,对请求发起重试。

请求重试需要考虑三个因素:

  1. 重试条件
  2. 重试次数
  3. 重试时延

配置

axios.defaults.retry = 1; //重试次数
axios.defaults.retryDelay = 1000;//重试延时
axios.defaults.shouldRetry = (error) => true;//重试条件,默认只要是错误都需要重试

  响应拦截重试

axios.interceptors.response.use(undefined, (err) => {
    var config = err.config;
    // 判断是否配置了重试
    if(!config || !config.retry) return Promise.reject(err);

    if(!config.shouldRetry || typeof config.shouldRetry != ‘function‘) {
       return Promise.reject(err);
    }

    //判断是否满足重试条件
    if(!config.shouldRetry(err)) {
      return Promise.reject(err);
    }

    // 设置重置次数,默认为0
    config.__retryCount = config.__retryCount || 0;

    // 判断是否超过了重试次数
    if(config.__retryCount >= config.retry) {
        return Promise.reject(err);
    }

    //重试次数自增
    config.__retryCount += 1;

    //延时处理
    var backoff = new Promise(function(resolve) {
        setTimeout(function() {
            resolve();
        }, config.retryDelay || 1);
    });

    //重新发起axios请求
    return backoff.then(function() {
        return axios(config);
    });
});

  

参考:https://github.com/axios/axios/issues/164#issuecomment-327837467

原文地址:https://www.cnblogs.com/cina33blogs/p/10942131.html

时间: 2024-10-04 13:56:14

Axios使用拦截器全局处理请求重试的相关文章

Java过滤器处理Ajax请求,Java拦截器处理Ajax请求,拦截器Ajax请求

Java过滤器处理Ajax请求,Java拦截器处理Ajax请求,拦截器Ajax请求 java 判断请求是不是ajax请求,Java判断是否为ajax请求 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> ?Copyright 蕃薯耀 2017年8月10日 http://www.cnblogs.com/

struts2 全局拦截器,显示请求方法和参数

后台系统中应该需要一个功能那就是将每个请求的url地址和请求的参数log出来,方便系统调试和bug追踪,使用struts2时可以使用struts2的全局拦截器实现此功能: import java.util.Iterator; import java.util.Map; import java.util.Set; import javax.servlet.http.HttpServletRequest; import org.apache.commons.lang3.StringUtils; im

struts2 全局拦截器,显示请求方法和參数

后台系统中应该须要一个功能那就是将每一个请求的url地址和请求的參数log出来,方便系统调试和bug追踪,使用struts2时能够使用struts2的全局拦截器实现此功能: import java.util.Iterator; import java.util.Map; import java.util.Set; import javax.servlet.http.HttpServletRequest; import org.apache.commons.lang3.StringUtils; i

Vue+Axios:使用拦截器来取消多次重复的请求

-----写在前面----- 家园的面试项目接近尾声了,剩下一个大模块(响应式布局)和两个小功能(下拉到一定程度获取新的信息.持续监听返回数据,当有更新时在页面上方提示) 听起来下拉到某个位置获取新信息是不难,但今天就遇到了两个问题: 1. 下拉过程中会不断发起url相同的请求,可能会有被拉黑的风险,并且影响实际性能.最重要的,在then()方法中会将返回数据稍做处理后添加进组件数据,并且会驱动Vue更新DOM, 因为用的v-for来填充数据,这样同一条数据就会被渲染两次 2.ReadHub除了

路由拦截器// 全局守卫

1.为什么需要路由拦截器 为了防止用户在知道组件名称的情况下,没有登录而直接进入相应的页面下,所以要为路由设置一个拦截器,来判断用户是否登录过. 2.怎样设置路由拦截器: 分析:当我们第一次登录的时候,向服务器发送请求,服务器会给我们一个token标记符(这个token时前后台约定好的一个值),客户端拿到这个token后将它保存到本地localstorage或vueX中,当我们再次访问时,将这个token在携带给服务器.服务器会通过算法校验这个token的合法性(这个token会有一个有效期),

springmvc3 拦截器,过滤ajax请求,判断用户登录,拦截规则设置

web.xml设置:(/拦截所有请求) <servlet> <servlet-name>dispatcher</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <init-param> <param-name>contextConfigLocation</param-name&

在拦截器中获取请求参数,[Ljava.lang.String; cannot be cast to java.lang.String报错

Map<String,Object> parametersmap=invocation.getInvocationContext().getParameters();//获取请求参数                Set<String> parametersset=parametersmap.keySet();                for(String key:parametersset){ System.out.println(key+":"+par

细说vue axios登录请求拦截器

当我们在做接口请求时,比如判断登录超时时候,通常是接口返回一个特定的错误码,那如果我们每个接口都去判断一个耗时耗力,这个时候我们可以用拦截器去进行统一的http请求拦截. 1.安装配置axios cnpm install --save axios 我们可以建一个js文件来做这个统一的处理,新建一个axios.js,如下 import axios from 'axios' import { Indicator } from 'mint-ui'; import { Toast } from 'min

vue导航守卫和axios拦截器的区别

在Vue项目中,有两种用户登录状态判断并处理的情况,分别为:导航守卫和axios拦截器. 一.什么是导航守卫? vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.(在路由跳转时触发) 我们主要介绍的是可以验证用户登录状态的全局前置守卫,当一个导航触发时,全局前置守卫按照创建顺序调用.守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于等待中. const router = new VueRouter({ ... }) router.beforeEach(