Axios请求失败重刷接口

我叫陈小皮。

已于 2023-05-31 10:57:25 修改

阅读量926

点赞数 1

分类专栏：解决方案文章标签： vue axios 接口重刷接口异常重刷

于 2023-05-31 10:54:37 首次发布

本文链接：https://blog.csdn.net/m0_37805167/article/details/130964246

版权

解决方案专栏收录该内容

35 篇文章 0 订阅

订阅专栏

需求背景

页面接口请求时偶尔会出现 Network Error 异常报错，重新请求就会请求成功
接口没办法捕获异常原因，前端来做一次重刷解决问题

net::ERR_SSL_PROTOCOL_ERROR
net::ERR_CONNECTION_REFUSED

解决思路

记录请求map（以url为唯一标识），并设置单个接口重刷最大次数
格式：{ ‘https://xxxx/xxx?id=1’, 0 }
请求成功时删除请求记录
请求错误时拦截错误信息，满足条件，记录错误
error.config 为上一次请求，调用service(error.config)即可请求

解决办法

// 记录请求 - 请求错误后++
const requestMap = {}
// 最大请求次数
const REQUEST_MAX_COUNT = 2

// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API || '',
  timeout: 60000
})
service.interceptors.request.use(request => {
  // 请求时记录请求地址
  const { config: { urlType = '' } = {} } = request
  if (request.url) {
    const requestKey = request.url
    !(requestKey in requestMap) && (requestMap[requestKey] = 0)
  }
  // ....
  return request
}, error => {})

// 响应时拦截
service.interceptors.response.use(async response => {
  // 请求成功，删掉请求记录
  const { status, data, config } = response
  config.url && config.url in requestMap && (delete requestMap[config.url])
  // ....
}, error => {
  // 报错，错误++，重新请求
  if (error.message === 'Network Error') {
    try {
      const requestKey = error.config.url
      requestMap[requestKey]++
      if (requestMap[requestKey] <= REQUEST_MAX_COUNT) {
        return service(error.config)
      }
    } catch (e) {
      console.log('Network Error try-catch-error', e)
    }
  } else {}
})

参考链接🔗

https://blog.csdn.net/MFWSCQ/article/details/125546946
https://blog.csdn.net/weixin_42349568/article/details/118408271
https://juejin.cn/post/6968487137670856711