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-retryaxios-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。如果你需要重试被取消的请求可以自定义retryConditionaxiosRetry(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(这是一个幂等性请求可以安全重试); }相关实现可查看 src/index.ts。高级使用技巧结合退避策略的最佳实践推荐使用指数退避策略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请求是幂等的可以自定义retryConditionaxiosRetry(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），仅供参考