需求背景

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

1. net::ERR_SSL_PROTOCOL_ERROR
2. net::ERR_CONNECTION_REFUSED
   

解决思路

1. 记录请求map（以url为唯一标识），并设置单个接口重刷最大次数
   格式：{ ‘https://xxxx/xxx?id=1’, 0 }
2. 请求成功时删除请求记录
3. 请求错误时拦截错误信息，满足条件，记录错误
4. 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