Axios请求失败重刷接口-Toy模板网

这篇具有很好参考价值的文章主要介绍了Axios请求失败重刷接口。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

需求背景

页面接口请求时偶尔会出现 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文章来源地址https://www.toymoban.com/news/detail-465788.html

到了这里，关于Axios请求失败重刷接口的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！