怎样优雅地为 Axios 设置失败重试与最大实验次数

        在 Vue 3 中，除了使用自界说的 useRequest 钩子函数外，还可以通过 axios 的拦截器 或 axios-retry 插件实现接口哀求失败后的重试逻辑。以下是两种详细方案的实现方式：
方案一：使用 axios 拦截器实现重试

       实现步骤： 通过 axios 的响应拦截器捕获错误，并在拦截器内部实现重试逻辑。

        1、设置 axios 实例：在 Vue 项目的入口文件（如 main.js）中设置 axios。
        2、添加响应拦截器：在拦截器中捕获错误，并根据条件进行重试。
        3、递归重试：在拦截器中控制重试次数和延长。

1. // main.js 或单独的 axios 配置文件
2. import axios from 'axios';
4. // 配置 axios 实例
5. const axiosInstance = axios.create({
6.     baseURL: '/api', // 根路径
7.     timeout: 10000, // 超时时间
8. });
10. // 响应拦截器：处理错误并重试
11. axiosInstance.interceptors.response.use((response) => response, // 成功响应直接返回
12.     async (error) => {
13.                 const config = error.config;
14.                 const status = error.response?.status;
15.                 const maxRetries = 5; // 最大重试次数
16.                 const retryDelay = 1000; // 重试间隔（毫秒）
18.                 // 如果没有重试次数或达到最大次数，直接抛出错误
19.                 if (!config || !config._retryCount) {
20.                         config._retryCount = 0;
21.                 }
22.                
23.                 if (config._retryCount >= maxRetries) {
24.                         return Promise.reject(error);
25.                 }
27.                 // 增加重试次数
28.                 config._retryCount += 1;
30.                 // 只对特定状态码（如 408、5xx）重试
31.                 if (
32.                         [408, 500, 502, 503, 504].includes(status) ||
33.                         (status === 401 && config.url.includes('/refresh-token')) // 示例：401 时重试刷新 token
34.                 ) {
35.                         // 等待一段时间后重试
36.                         await new Promise((resolve) => setTimeout(resolve, retryDelay * config._retryCount));
38.                         // 重新发送请求
39.                         return axiosInstance(config);
40.                 }
42.                 // 其他错误直接抛出
43.                 return Promise.reject(error);
44.     }
45. );
47. // 导出配置好的 axios 实例
48. export default axiosInstance;

复制代码

使用示例（在 Vue 组件中）

1. <template>
2.         <div>
3.                 <button @click="fetchData">获取数据</button>
4.                 <div v-if="loading">加载中...</div>
5.                 <div v-else-if="data">数据：{{ data }}</div>
6.                 <div v-else-if="error">错误：{{ error.message }}</div>
7.         </div>
8. </template>
10. <script setup>
11. import axiosInstance from '@/utils/axios'; // 导入配置好的 axios 实例
12. import { ref } from 'vue';
14. const loading = ref(false);
15. const data = ref(null);
16. const error = ref(null);
18. const fetchData = async () => {
19.         try {
20.                 loading.value = true;
21.                 const response = await axiosInstance.get('/data');
22.                 data.value = response.data;
23.                 error.value = null;
24.         } catch (err) {
25.                 error.value = err;
26.         } finally {
27.                 loading.value = false;
28.         }
29. };
30. </script>

复制代码

        1、拦截器全局生效：全部通过 axiosInstance 发起的哀求都会经过拦截器，自动处理重试逻辑。可通过设置 config 参数（如 config._retryCount）控制重试次数。
        2、重试条件：根据 HTTP 状态码（如 408、5xx）决定是否重试。可扩展为根据业务逻辑（如 token 过期后刷新）触发重试。
        3、递归重试：通过 axiosInstance(config) 重新发送哀求，递归调用拦截器。必要手动维护 config._retryCount 来计数。

方案二：使用 axios-retry 插件

        通过 axios-retry 插件快速实现重试逻辑，无需手动编写递归逻辑。
        1、安装插件：

1. npm install axios-retry

复制代码

        2、设置 axios 实例：

1. // main.js 或单独的 axios 配置文件
2. import axios from 'axios';
3. import axiosRetry from 'axios-retry';
5. const axiosInstance = axios.create({
6.         baseURL: '/api',
7.         timeout: 10000,
8. });
10. // 配置重试策略
11. axiosRetry(axiosInstance, {
12.         retries: 5, // 最大重试次数
13.         retryDelay: (retryCount) => {
14.                 return retryCount * 1000; // 指数退避：1s、2s、3s...
15.         },
16.         retryCondition: (error) => {
17.                 // 自定义重试条件（如针对特定状态码）
18.                 if (error.response) {
19.                         return [408, 500, 502, 503, 504].includes(error.response.status);
20.                 }
21.                 return axiosRetry.isNetworkError(error); // 网络错误自动重试
22.         },
23. });
25. export default axiosInstance;

复制代码

        3、使用示例（与方案一相同）

1. <template>
2.   <!-- 同上 -->
3. </template>
5. <script setup>
6. import axiosInstance from '@/utils/axios'; // 已配置重试的 axios 实例
7. // 同上
8. </script>

复制代码

---

关键点说明

        1、插件优势：开箱即用，代码简便。支持自界说重试条件、延长策略（如指数退避）。
内置对网络错误（如超时）的自动重试。
        2、机动性：可通过 retryCondition 函数机动控制重试条件。支持 retryDelay 函数实现动态延长（如指数退避）。

---

对比与选择

方案优点缺点拦截器手动实现完全自界说逻辑，无依靠代码冗余，需手动维护计数器axios-retry 插件简朴易用，开箱即用需引入第三方依靠

---

留意事项

        1、避免无限循环：必须设置最大重试次数（如 maxRetries 或 retries 参数）。确保重试条件不会无限触发（如 401 未授权 需结合 token 刷新逻辑）。
        2、错误范例区分：对于 4xx 客户端错误（如 400、401、403），通常不建议重试，需业务逻辑处理（如跳转登录页）。对 5xx 服务端错误（如 500、503）或网络错误（如超时），可安全重试。
        3、性能优化：使用 指数退避（如 retryDelay: (count) => Math.pow(2, count) * 1000）减少并发重试的压力。结合 限流（如 maxRetries 与 retryDelay 组合）避免频仍哀求。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。