Vue中axios全局配置响应拦截器超时重新请求，跳转到错误页面

需求：调用后台接口时如果调用响应失败，重复请求10次，如果还是不成功则跳转到错误页面提示用户

http.js

import axios from 'axios' // 引入axios
import router from '@/router'

// 设置axios请求url
axios.defaults.baseURL = window.config.baseURL

// 设置重新请求次数
axios.defaults.retry = 10;
// 设置请求延时
axios.defaults.retryDelay = 1000;

// 响应拦截
axios.interceptors.response.use(res => {
  console.log('response', res)
  return res;
}, err => {
  console.log('err', err)
  var config = err.config
  // 如果配置不存在或未设置重试选项，则返回错误信息
  if (!config || !config.retry) return Promise.reject(err.response.data)
  // 设置变量即跟踪重试次数
  config.retryCount = config.retryCount || 0
  console.log('config', config)
  console.log('count', config.retryCount)
  // 检查我们是否已经超过了总重试次数
  if (config.retryCount > config.retry) {
    console.log('count', config.retryCount)
    router.push('/error')
    // 返回错误信息
    return Promise.reject(err.response.data)
  }

  // 重试次数加1
  config.retryCount++

  // 创建延时器等待发送重试请求
  var backoff = new Promise((resolve) => {
    setTimeout(() => {
      console.log('创建延迟器')
      resolve()
    }, config.retryDelay || 1)
  })

  // 返回调用axios来重试请求
  return backoff.then(() => {
    console.log('重试请求')
    return axios(config)
  })
})

参考：请求超时VUE axios重新再次请求

如果大家想一起交流学习，共同进步，欢迎搜索公众号“是日前端”，输入关键词如：前端基础，获取资料，资料刚开始整理，目前还在完善中，点击交流群按钮进交流群，群里仅限技术交流、面试交流等，需要其它相关资料可以群里说，后续交流群人数增多会考虑特色内容，再次感谢大家的支持~