时间戳

首页 > 解决方案 > Axios - 设置拦截器以在错误时重试原始请求

javascript - Axios - 设置拦截器以在错误时重试原始请求

问题描述

我需要为我所有的 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
  }
 }
})

标签： javascriptvue.jsaxiosvuex

解决方案

responseAxios 的拦截器中的对象包含一个对象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 动作，可以先将 store 定义为变量，然后在回调中调用 dispatch 函数。像这样：

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;

推荐阅读