Axios - настроить перехватчик, чтобы повторить исходный запрос при ошибке

Question

Мне нужно настроить глобальный перехватчик для всех моих вызовов axios. Я определяю их внутри действий vuex, и мне нужно, чтобы, если есть код состояния 429, вызывается действие, а затем после выполнения этих действий выполняется повторная попытка с исходным запросом. Я изучаю перехватчики, но не знаю, как их правильно настроить, и будет ли работать внеexport default. Может кто-нибудь помочь мне?

axios.interceptors.use( (response) => {
// if no status error code is returned get the response
  return response
}, (error) => {
  console.log(error)
  // here I need to retry the ajax call after that my loadProxy action is made and a 429 status code is sent from the server
  return Promise.reject(error);
})

export default new Vuex.Store({
 actions: {
  loadProxy({ commit }) {
  // here I have an axios get request to fetch a proxy from an API 
  },
  fetchData({ commit, state }) {
  // here I fetch the data to use in my app, sometimes due to many requests I need to refresh the proxy ip to let the app continue working
  }
 }
})

Answer 1

В response объект в перехватчике Axios содержит configобъект. ( Смотрите здесь)

Вы можете использовать это, чтобы повторно инициировать запрос с исходной конфигурацией.

Пример:

axios.interceptors.response.use((response) => {
    return response;
}, (error) => {
    if (error.response.status === 429) {
        // If the error has status code 429, retry the request
        return axios.request(error.config);
    }
    return Promise.reject(error);
});

Чтобы использовать действие Vuex внутри обратного вызова перехватчика, вы можете сначала определить хранилище как переменную, а затем вызвать функцию диспетчеризации внутри обратного вызова. Как это:

const store = new Vuex.Store({
   // define store...
})

axios.interceptors.response.use((response) => {
    return response;
}, (error) => {
    if (error.response.status === 429) {
        store.dispatch("YOUR_ACTION");
        return axios.request(error.config);
    }
    return Promise.reject(error);
});

export default store;

Answer 2

Можно поэкспериментировать с axios-retry, есть вариант

retryCondition: Обратный вызов для дальнейшего контроля, следует ли повторить запрос

import axiosRetry from "axios-retry"

// ...

// intercept
axiosRetry(axios, {
  retries: 3,
  retryCondition: (error) => {
    return error.response.status === 429
  },
})