axios-retry配置详解：10个核心选项提升应用稳定性-洪萨配资

axios-retry配置详解：10个核心选项提升应用稳定性

【免费下载链接】axios-retryAxios plugin that intercepts failed requests and retries them whenever possible项目地址: https://gitcode.com/gh_mirrors/ax/axios-retry

axios-retry是一个功能强大的Axios插件，能够自动拦截失败的请求并在可能的情况下重试它们，有效提升应用的稳定性和可靠性。无论是处理网络波动、服务器过载还是临时错误，合理配置axios-retry都能显著改善用户体验。

快速入门：基础安装与配置

要开始使用axios-retry，首先需要通过npm安装该插件：

npm install axios-retry

基础配置只需几行代码即可实现请求重试功能：

import axios from 'axios'; import axiosRetry from 'axios-retry'; // 应用默认配置 axiosRetry(axios, { retries: 3, // 重试次数 retryDelay: axiosRetry.exponentialDelay // 指数退避策略 }); // 发送请求 axios.get('https://api.example.com/data') .then(response => console.log(response.data)) .catch(error => console.error('请求失败:', error));

核心配置选项详解

1. retries：控制重试次数

retries选项定义了请求失败后的最大重试次数，默认值为3次。根据API的稳定性和重要性，可以适当调整这一数值：

// 重要数据请求增加重试次数 axiosRetry(axios, { retries: 5 // 最多重试5次 });

最佳实践：对于非关键数据，保持默认3次重试；对于重要交易或数据同步，可增加到5次。

2. retryCondition：自定义重试条件

retryCondition是一个函数，用于判断请求是否应该被重试。默认情况下，axios-retry会重试网络错误或5xx状态码的幂等请求（GET、HEAD、OPTIONS、PUT或DELETE）。

自定义重试条件示例：

// 仅重试429和5xx状态码的请求 axiosRetry(axios, { retryCondition: (error) => { return error.response && (error.response.status === 429 || (error.response.status >= 500 && error.response.status <= 599)); } });

相关源码定义可查看 src/index.ts。

3. retryDelay：控制重试延迟策略

retryDelay函数用于计算两次重试之间的延迟时间，支持多种策略：

无延迟：默认策略，立即重试
指数退避：延迟时间随重试次数指数增长
线性延迟：延迟时间随重试次数线性增长
自定义延迟：根据需求完全自定义

// 指数退避策略（推荐） axiosRetry(axios, { retryDelay: axiosRetry.exponentialDelay }); // 线性延迟策略 axiosRetry(axios, { retryDelay: axiosRetry.linearDelay(1000) // 每次重试增加1秒延迟 }); // 自定义延迟策略 axiosRetry(axios, { retryDelay: (retryCount, error) => { // 从响应头获取重试延迟（如429状态码的Retry-After头） const retryAfter = error.response?.headers['retry-after']; return retryAfter ? parseInt(retryAfter) * 1000 : retryCount * 1000; } });

指数退避策略的实现可查看 src/index.ts。

4. shouldResetTimeout：重置超时时间

shouldResetTimeout选项控制是否在重试时重置超时时间，默认值为false。设置为true时，每次重试都会使用原始超时时间：

axiosRetry(axios, { shouldResetTimeout: true, // 重置超时时间 timeout: 5000 // 每次重试都有5秒超时 });

5. onRetry：重试回调函数

onRetry回调函数在每次重试前被调用，可以用于记录日志、更新UI状态或修改请求配置：

axiosRetry(axios, { onRetry: (retryCount, error, config) => { console.log(`第${retryCount}次重试请求: ${config.url}`); // 可以在这里修改请求配置，如更新认证令牌 config.headers['Authorization'] = `Bearer ${getNewToken()}`; } });

6. onMaxRetryTimesExceeded：最大重试次数超限回调

当所有重试尝试都失败后，onMaxRetryTimesExceeded回调函数会被调用，可用于执行最终的错误处理逻辑：

axiosRetry(axios, { onMaxRetryTimesExceeded: (error, retryCount) => { console.error(`已达到最大重试次数(${retryCount})，请求失败:`, error.message); // 可以在这里触发告警或 fallback 机制 sendErrorReport(error); } });

7. validateResponse：自定义响应验证

validateResponse函数允许你自定义什么情况下的响应被视为成功，覆盖Axios默认的2xx状态码验证：

axiosRetry(axios, { validateResponse: (response) => { // 认为2xx和404状态码都是成功响应 return response.status >= 200 && response.status < 300 || response.status === 404; } });

8. 每请求单独配置

除了全局配置外，还可以为单个请求设置独立的重试配置，这会覆盖全局配置：

axios.get('https://api.example.com/data', { 'axios-retry': { retries: 2, // 此请求仅重试2次 retryDelay: axiosRetry.linearDelay(500) } });

9. 取消请求的重试控制

axios-retry默认不会重试被取消的请求（错误码为ERR_CANCELED）。如果你需要重试被取消的请求，可以自定义retryCondition：

axiosRetry(axios, { retryCondition: (error) => { // 即使请求被取消也重试 return error.code === 'ERR_CANCELED' || axiosRetry.isNetworkOrIdempotentRequestError(error); } });

10. 幂等性请求判断

axios-retry默认只对幂等性请求（GET、HEAD、OPTIONS、PUT、DELETE）进行重试，以避免重复提交数据。可以通过isIdempotentRequestError函数判断请求是否为幂等性请求：

import axiosRetry from 'axios-retry'; if (axiosRetry.isIdempotentRequestError(error)) { console.log('这是一个幂等性请求，可以安全重试'); }

高级使用技巧

结合退避策略的最佳实践

推荐使用指数退避策略（exponentialDelay），它会根据重试次数自动增加延迟时间，并添加随机抖动以避免请求风暴：

// 自定义指数退避参数 axiosRetry(axios, { retryDelay: (retryCount) => { return axiosRetry.exponentialDelay(retryCount, undefined, 300); // 基础延迟300ms } });

处理429 Too Many Requests

当API返回429状态码时，通常会在响应头中包含Retry-After字段，指示何时可以重试请求。axios-retry的retryAfter函数可以解析这个头信息：

axiosRetry(axios, { retryDelay: (retryCount, error) => { return axiosRetry.retryAfter(error) || retryCount * 1000; } });

记录和监控重试行为

通过onRetry回调可以实现详细的重试日志记录，帮助分析和优化API请求：

axiosRetry(axios, { onRetry: (retryCount, error, config) => { const logData = { timestamp: new Date().toISOString(), retryCount, url: config.url, method: config.method, error: error.message, status: error.response?.status }; console.log('请求重试:', logData); // 可以发送到监控系统 // monitorClient.send('request_retry', logData); } });

常见问题解答

Q: 为什么我的POST请求没有被重试？

A: 默认情况下，axios-retry不会重试POST请求，因为POST通常是非幂等性的（多次执行可能产生不同结果）。如果确定你的POST请求是幂等的，可以自定义retryCondition：

axiosRetry(axios, { retryCondition: (error) => { return error.config.method === 'post' && axiosRetry.isRetryableError(error); } });

Q: 如何禁用特定请求的重试？

A: 在请求配置中设置retries: 0即可禁用该请求的重试：

axios.post('/api/submit', data, { 'axios-retry': { retries: 0 } });

Q: 重试时会保留原始请求的所有配置吗？

A: 是的，axios-retry会保留原始请求的所有配置，包括 headers、data 等。如果需要修改重试请求的配置，可以在onRetry回调中进行。

总结

axios-retry提供了丰富的配置选项，可以根据不同的应用场景和需求进行灵活调整。通过合理配置retries、retryCondition、retryDelay等核心选项，能够有效提升应用的稳定性和可靠性，减少因网络波动或服务器临时错误导致的失败。

无论是简单的默认配置还是复杂的自定义策略，axios-retry都能帮助你构建更健壮的网络请求系统。开始使用axios-retry，为你的应用添加一层可靠的请求保障吧！

【免费下载链接】axios-retryAxios plugin that intercepts failed requests and retries them whenever possible项目地址: https://gitcode.com/gh_mirrors/ax/axios-retry

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

axios-retry配置详解：10个核心选项提升应用稳定性