状态为200，数据为空时，axios拦截器重试http请求

IT技术 node.js reactjs http axios
2021-05-13 12:05:28

我正在短暂轮询一个端点，直到一些数据准备好我想重试请求最多 10 次。

当数据未准备好时，我收到一个带有空数组的 200。

当数据准备好时，我收到一个带有非空数组的 200。

我使用以下库 https://github.com/axios/axios https://github.com/softonic/axios-retry

 try {

   const axiosInstance = axios.create();

   axiosInstance.interceptors.response.use((response) => {

     if (response.data.metrics.length === 0) {
       const error = new Error("Metrics Not Ready");
       return Promise.reject(error);

     }
     return response;
   }, (error) => {
     return Promise.reject(error);
   });

   axiosRetry(axiosInstance, {
     retries: 10,
     retryCondition: (error) => {
       console.log("RETRY CONDITION", error);
     },
   });

   const metrics = await axiosInstance(options);

 } catch (error) {
   console.log(error);
 }

我创建了一个 axios 拦截器来检查数组的长度，如果它是 0 我抛出错误。但是，这不会被 axiosRetry 捕获，此时我想重试请求。相反，它在 try catch 块中被捕获并结束。

1个回答

您不需要 axios-retry，您只需要 axios 及其响应拦截器，步骤如下：

  1. 检查数据是否为空。如果是，则抛出axios.Cancel错误。这将取消请求，调用错误处理程序而不是成功处理程序。
  2. 在错误处理程序中，如果我们没有超过最大重试次数（在您的情况下，它是 10），则重新发送 HTTP 请求。
  3. 继续运行第 1 步和第 2 步，直到我们获得数据或重试 10 次。

代码如下所示：

const axios = require('axios');

const MAX_RETRY = 10;
let currentRetry = 0;

function successHandler() {
  console.log('Data is Ready');
}

function errorHandler() {
  if (currentRetry < MAX_RETRY) {
    currentRetry++;
    console.log('Retrying...');
    sendWithRetry();
  } else {
    console.log('Retried several times but still failed');
  }
}

function sendWithRetry() {
  axios.get('http://example.com')
    .then(successHandler).catch(errorHandler);
}

axios.interceptors.response.use(function (response) {
  if (response.data.metrics.length) {
    throw new axios.Cancel('Operation canceled by the user.');
  } else {
    return response;
  }
}, function (error) {
  return Promise.reject(error);
});

sendWithRetry();

对于 axios-retry，不幸的是200 OK，当响应状态为 时，您无法重试 HTTP 请求，因为 axios-retry 使用axios.interceptors.response.use但对“成功响应”没有任何作用。

这里是axios-retry的源文件中对应的代码es/index.js。可以看到响应成功的拦截器是null：

export default function axiosRetry(axios, defaultOptions) {
  axios.interceptors.request.use(config => {
    const currentState = getCurrentState(config);
    currentState.lastRequestTime = Date.now();
    return config;
  });

  axios.interceptors.response.use(null, error => {
    const config = error.config;

    // If we have no information to retry the request
    if (!config) {
      return Promise.reject(error);
    }
    ....
其它你可能感兴趣的问题
上一篇如何根据 React-Router 4 中的条件重定向到特定页面 下一篇组件之间的通信