axios-retry源码解析：深入理解拦截器与重试机制实现原理

axios-retry源码解析深入理解拦截器与重试机制实现原理【免费下载链接】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作为Axios生态中的重要补充通过拦截器机制实现了请求失败后的智能重试。项目采用TypeScript开发主要代码集中在src/index.ts文件中测试用例则位于spec/index.spec.ts。核心功能包括基于HTTP状态码和请求类型的智能重试判断可配置的重试次数和重试延迟策略支持指数退避和线性延迟两种重试间隔算法请求级别的个性化重试配置重试过程中的事件回调机制拦截器实现原理axios-retry的核心能力来源于Axios的拦截器机制。在src/index.ts中通过注册请求拦截器和响应拦截器实现了重试逻辑的注入。请求拦截器初始化请求拦截器主要负责初始化重试状态代码如下const requestInterceptorId axiosInstance.interceptors.request.use((config) { setCurrentState(config, defaultOptions, true); if (config[namespace]?.validateResponse) { config.validateStatus () false; } return config; });setCurrentState函数会初始化重试配置包括重试次数、上次请求时间等状态信息并将这些信息存储在请求配置的axios-retry命名空间下。响应拦截器实现重试逻辑响应拦截器是重试机制的核心代码位于src/index.ts的响应拦截器错误处理部分const responseInterceptorId axiosInstance.interceptors.response.use(null, async (error) { const { config } error; if (!config) { return Promise.reject(error); } const currentState setCurrentState(config, defaultOptions); if (error.response currentState.validateResponse?.(error.response)) { return error.response; } if (await shouldRetry(currentState, error)) { return handleRetry(axiosInstance, currentState, error, config); } await handleMaxRetryTimesExceeded(currentState, error); return Promise.reject(error); });响应拦截器的工作流程可以概括为检查请求配置是否存在初始化或更新当前重试状态根据自定义响应验证逻辑判断是否直接返回判断是否满足重试条件满足条件则执行重试逻辑达到最大重试次数时执行回调并拒绝请求重试条件判断机制axios-retry的重试条件判断是其智能化的关键所在。默认情况下它会重试网络错误或幂等请求的5xx错误。默认重试条件在DEFAULT_OPTIONS中定义了默认的重试条件export const DEFAULT_OPTIONS: RequiredIAxiosRetryConfig { retries: 3, retryCondition: isNetworkOrIdempotentRequestError, retryDelay: noDelay, shouldResetTimeout: false, onRetry: () {}, onMaxRetryTimesExceeded: () {}, validateResponse: null };isNetworkOrIdempotentRequestError函数结合了网络错误判断和幂等请求判断export function isNetworkOrIdempotentRequestError(error: AxiosError): boolean { return isNetworkError(error) || isIdempotentRequestError(error); }幂等请求判断幂等请求判断确保只有安全的请求才会被重试避免重复提交导致的副作用const IDEMPOTENT_HTTP_METHODS [get, head, options, put, delete]; export function isIdempotentRequestError(error: AxiosError): boolean { if (!error.config?.method) { return false; } return isRetryableError(error) IDEMPOTENT_HTTP_METHODS.indexOf(error.config.method) ! -1; }可重试错误判断isRetryableError函数定义了哪些状态码的错误应该被重试export function isRetryableError(error: AxiosError): boolean { return ( error.code ! ECONNABORTED (!error.response || error.response.status 429 || (error.response.status 500 error.response.status 599)) ); }默认情况下429(Too Many Requests)和5xx系列错误会触发重试而ECONNABORTED(超时)错误不会被重试。重试延迟策略axios-retry提供了灵活的重试延迟策略包括默认无延迟、指数退避和线性延迟。指数退避延迟指数退避策略会随着重试次数增加而指数级增加延迟时间有效避免了请求风暴export function exponentialDelay( retryCount 0, error: AxiosError | undefined undefined, delayFactor 100 ): number { const calculatedDelay 2 ** retryCount * delayFactor; const delay Math.max(calculatedDelay, retryAfter(error)); const randomSum delay * 0.2 * Math.random(); // 0-20%的随机延迟 return delay randomSum; }线性延迟线性延迟策略则是每次重试都增加固定的延迟时间export function linearDelay( delayFactor: number | undefined 100 ): (retryCount: number, error: AxiosError | undefined) number { return (retryCount 0, error undefined) { const delay retryCount * delayFactor; return Math.max(delay, retryAfter(error)); }; }尊重Retry-After响应头retryAfter函数会解析响应头中的Retry-After字段优先使用服务器建议的重试时间export function retryAfter(error: AxiosError | undefined undefined): number { const retryAfterHeader error?.response?.headers[retry-after]; if (!retryAfterHeader) { return 0; } let retryAfterMs (Number(retryAfterHeader) || 0) * 1000; if (retryAfterMs 0) { retryAfterMs (new Date(retryAfterHeader).valueOf() || 0) - Date.now(); } return Math.max(0, retryAfterMs); }重试执行流程handleRetry函数是执行重试的核心逻辑位于src/index.ts中async function handleRetry( axiosInstance: AxiosInstance, currentState: RequiredIAxiosRetryConfigExtended, error: AxiosError, config: AxiosRequestConfig ) { currentState.retryCount 1; const { retryDelay, shouldResetTimeout, onRetry } currentState; const delay retryDelay(currentState.retryCount, error); fixConfig(axiosInstance, config); if (!shouldResetTimeout config.timeout currentState.lastRequestTime) { const lastRequestDuration Date.now() - currentState.lastRequestTime; const timeout config.timeout - lastRequestDuration - delay; if (timeout 0) { return Promise.reject(error); } config.timeout timeout; } config.transformRequest [(data) data]; await onRetry(currentState.retryCount, error, config); if (config.signal?.aborted) { return Promise.resolve(axiosInstance(config)); } return new Promise((resolve) { const abortListener () { clearTimeout(timeout); resolve(axiosInstance(config)); }; const timeout setTimeout(() { resolve(axiosInstance(config)); if (config.signal?.removeEventListener) { config.signal.removeEventListener(abort, abortListener); } }, delay); if (config.signal?.addEventListener) { config.signal.addEventListener(abort, abortListener, { once: true }); } }); }这段代码处理了重试过程中的关键步骤增加重试计数计算重试延迟时间修复配置中的循环引用问题调整超时时间如果不重置超时执行重试前的回调函数处理AbortSignal中断延迟后重新发起请求配置合并与优先级axios-retry支持多级配置包括全局默认配置和请求级别的个性化配置。配置合并逻辑在getRequestOptions函数中实现function getRequestOptions( config: AxiosRequestConfig, defaultOptions: IAxiosRetryConfig ): RequiredIAxiosRetryConfig IAxiosRetryConfigExtended { return { ...DEFAULT_OPTIONS, ...defaultOptions, ...config[namespace] }; }配置的优先级从高到低为请求级别配置 实例级别配置 默认配置。事件回调机制axios-retry提供了丰富的事件回调允许开发者在重试过程中执行自定义逻辑onRetry: 每次重试前触发onMaxRetryTimesExceeded: 达到最大重试次数后触发这些回调可以是同步函数也可以是返回Promise的异步函数为复杂场景提供了灵活性。测试用例分析spec/index.spec.ts包含了全面的测试用例覆盖了各种重试场景成功响应处理错误响应重试判断不同HTTP方法的重试策略超时处理与重置自定义重试条件各种延迟策略测试事件回调测试测试使用Jasmine框架和nock库模拟HTTP请求确保了代码的可靠性和稳定性。总结与最佳实践axios-retry通过优雅的拦截器设计和灵活的配置选项为Axios请求提供了强大的重试机制。在使用过程中建议根据业务需求合理设置重试次数避免过多重试导致的性能问题对非幂等请求如POST谨慎使用重试避免产生副作用使用指数退避策略减轻服务器压力结合onRetry回调实现重试日志记录利用validateResponse自定义响应验证逻辑通过深入理解axios-retry的实现原理开发者可以更好地配置和扩展重试策略提升应用的稳定性和用户体验。要开始使用axios-retry首先需要克隆仓库git clone https://gitcode.com/gh_mirrors/ax/axios-retry然后根据项目需求进行配置和使用详细的使用方法可以参考项目文档和测试用例。axios-retry的源码设计简洁而强大充分利用了Axios的拦截器机制为我们展示了如何优雅地扩展Axios功能。无论是学习拦截器实现还是理解重试策略设计axios-retry都是一个值得深入研究的优秀开源项目。【免费下载链接】axios-retryAxios plugin that intercepts failed requests and retries them whenever possible项目地址: https://gitcode.com/gh_mirrors/ax/axios-retry创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考