axios-retry 原理

`axios-retry` 是一个用于在请求失败时重试 `axios` 请求的插件。它的原理是在 `axios` 的拦截器中添加了一个重试机制，当请求失败时，会根据配置进行重试，直到请求成功或达到最大重试次数为止。

`axios-retry` 主要依赖于 `axios` 和 `retry` 这两个库。在使用时，需要将 `axios` 和 `axios-retry` 导入，并使用 `axiosRetry` 函数进行配置。常见的配置项包括最大重试次数、重试间隔时间、重试条件等。

在 `axios` 发送请求时，会先经过 `axios-retry` 的拦截器。如果请求失败，则会判断是否需要重试。如果需要重试，则会根据配置进行等待一定时间后再次发送请求。如果重试次数已达到最大值，则不再进行重试，直接返回错误信息。

总的来说，`axios-retry` 的原理就是通过在 `axios` 拦截器中添加重试机制，来实现在请求失败时自动重试的功能。

相关问题

jwt的token刷新，通过refreshToken刷新后，axios调用触发刷新的token的接口会返回失败，导致页面加载数据未空，怎么处理使其正常？

这种情况可能是因为在刷新token的过程中，axios调用接口的token还没有更新为新的token。你可以在axios拦截器中进行处理，判断响应状态码是否为401（即token失效），如果是则在刷新token后重新发送之前的请求。

具体实现步骤如下：

1. 在axios的请求拦截器中，为所有请求添加token。

axios.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token')
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

2. 在axios的响应拦截器中，判断响应状态码是否为401，如果是则刷新token并重新发送之前的请求。

axios.interceptors.response.use(
  response => {
    return response
  },
  error => {
    const originalRequest = error.config
    if (error.response.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true
      return axios.post('/api/refresh_token', { refreshToken: localStorage.getItem('refreshToken') })
        .then(response => {
          const token = response.data.token
          const refreshToken = response.data.refreshToken
          localStorage.setItem('token', token)
          localStorage.setItem('refreshToken', refreshToken)
          axios.defaults.headers.common['Authorization'] = `Bearer ${token}`
          return axios(originalRequest)
        })
    }
    return Promise.reject(error)
  }
)

这样做的原理是，在刷新token后，重新发送之前的请求，此时axios会自动添加新的token，并且保证了请求不会丢失。