对于请求重试的功能来说，我们希望让用户不仅能够设置重试次数，而且可以设置重试延时时间。当请求失败的时候，若该请求的配置对象配置了重试次数，而 Axios 就会重新发起请求进行重试操作。为了能够全局进行请求重试，接下来我们在响应拦截器上来实现请求重试功能，具体代码如下所示：
import axios from 'axios';
const MAX_RETRIES = 3;
// 最大重试次数 const RETRY_INTERVAL = 1000;
// 重试间隔时间（毫秒）
const axiosInstance = axios.create();
axiosInstance.interceptors.response.use(null, (error) => { const { config, response } = error; if (response && response.status >= 500) {
// 如果是服务器错误，进行请求重试
config.__retryCount = config.__retryCount || 0;
if (config.__retryCount >= MAX_RETRIES) { return Promise.reject(error);
}
config.__retryCount += 1;
const delay = new Promise((resolve) => setTimeout(resolve, RETRY_INTERVAL));
return delay.then(() => axiosInstance(config)); } return Promise.reject(error); });
// 使用axiosInstance发送请求
axiosInstance.get('https://example.com/api/data') .then((response) => {
// 请求成功处理逻辑 console.log(response.data);
}) .catch((error) => {
// 请求失败处理逻辑 console.error(error);
});
以上的代码并不会复杂上述示例中，使用了
axios的拦截器（interceptor）来捕获请求失败的情况。如果发现响应状态码为 500 或以上的服务器错误，就会进行请求重试。每次重试前会有一个预定的延迟时间（RETRY_INTERVAL），重试的次数不超过最大重试次数（MAX_RETRIES）。这样可以确保在某些网络问题或服务器问题导致请求失败时，可以自动进行重试，提高请求的稳定性和可靠性。
在前端开发中，使用 Axios 进行 HTTP 请求时，实现请求重试功能可以提高应用程序的稳定性和可靠性。为了实现请求重试，通常可以利用 Axios 的拦截器机制。
首先，可以设定最大重试次数和重试间隔时间。当发起的请求失败时，可以在 Axios 的拦截器中捕获错误，并判断是否需要进行重试。针对需要重试的情况（如服务器错误、网络问题等），在延迟后再次发起请求。同时需要记录重试次数，以便控制重试次数不超过设定的最大值，避免无限重试导致资源浪费。
在重试过程中，可以考虑增加一些逻辑，比如在每次重试前进行一些操作、记录重试日志等，以便跟踪和排查问题。另外，在每次重试前也可以考虑对请求做一些初始化，确保请求参数等状态是准确的。
通过实现请求重试功能，可以有效应对网络不稳定、服务器故障等情况，提高前端应用的健壮性和可用性。同时，合理设置重试次数和间隔时间，能够在一定程度上减少请求失败对用户体验的影响，保证用户能够顺利完成其操作并获得所需的数据或服务。
