VueUse中useFetch的onFetchError回调增强方案解析

背景介绍

在现代前端开发中，网络请求处理是每个应用必不可少的部分。VueUse作为Vue生态中广受欢迎的实用工具库，其提供的useFetch组合式函数大大简化了数据获取的逻辑。然而，在实际业务场景中，特别是面对HTTP错误状态码时，开发者往往需要更灵活的错误处理机制。

问题分析

在HTTP协议中，429状态码表示"Too Many Requests"，即请求频率过高。服务端通常会通过Retry-After头部告知客户端应该等待多久后重试。传统的错误处理方式往往需要在组件层面实现重试逻辑，这会导致业务代码与错误处理逻辑耦合度过高。

技术方案

VueUse的useFetch函数虽然提供了onFetchError回调，但原版实现中该回调的上下文参数缺少execute方法，使得在错误处理中无法直接触发请求重试。这迫使开发者不得不通过外部变量或复杂的状态管理来实现重试逻辑。

实现细节

通过修改useFetch的实现，我们可以在onFetchError回调的上下文参数中加入execute方法。这一改动看似微小，却为错误处理带来了极大的灵活性：

1. 类型定义增强：在TypeScript类型声明中为onFetchError回调参数添加execute方法签名
2. 实现逻辑调整：在执行onFetchError回调时，将execute方法作为上下文参数的一部分传入

实际应用

这种增强后的错误处理方式特别适合以下场景：

1. 速率限制处理：当遇到429状态码时，自动解析Retry-After头部并延迟重试
2. 认证失效处理：当401错误发生时，先刷新令牌再自动重试原请求
3. 服务不可用处理：对503错误实现指数退避重试策略

最佳实践

在实际项目中，我们可以构建一个统一的错误处理层：

async function onFetchError(ctx) {
  // 处理速率限制
  if (ctx.response?.status === 429) {
    const retryAfter = Number(ctx.response.headers.get('Retry-After')) || 1;
    await delay(retryAfter * 1000);
    return ctx.execute();
  }
  
  // 处理服务端错误
  if (ctx.response?.status >= 500) {
    showServerErrorNotification();
  }
  
  return ctx;
}

技术价值

这种改进方案具有多重优势：

1. 关注点分离：将错误处理逻辑从组件中解耦
2. 代码复用：可以集中管理各种错误情况的处理策略
3. 用户体验：自动重试机制减少了用户手动操作的负担
4. 可观测性：可以方便地添加错误监控和日志记录

总结

VueUse库中useFetch函数的这一增强，体现了现代前端开发中对于开发者体验和业务灵活性的双重追求。通过简单的API扩展，为复杂的业务场景提供了优雅的解决方案，这种设计思路值得我们在其他工具函数的设计中借鉴。