VueUse中useFetch的错误处理机制优化探讨

背景介绍

在现代前端开发中，网络请求处理是核心功能之一。VueUse作为Vue生态中广受欢迎的实用工具库，其提供的useFetch组合式函数极大地简化了HTTP请求的处理流程。然而，在实际应用中，开发者经常需要处理各种网络错误，特别是身份认证相关的401错误。

问题分析

在身份认证场景中，常见的模式是使用access token和refresh token机制。当access token过期时，服务器会返回401未授权错误，此时客户端需要自动刷新token并重试原始请求。然而，当前VueUse的useFetch实现存在一个局限性：在onFetchError钩子中无法获取触发错误的原始请求信息。

这个限制导致开发者无法优雅地实现以下流程：

1. 捕获401错误
2. 调用/refresh端点获取新token
3. 使用新token重试原始请求

技术解决方案

从技术实现角度看，解决方案是在onFetchError钩子的上下文对象中增加原始请求信息。这应该包括：

• 请求URL
• 请求方法
• 请求头
• 请求体数据

一个理想的实现应该允许开发者这样使用：

useFetch('https://api.example.com/data', {
  onFetchError(ctx) {
    if(ctx.response?.status === 401) {
      // 获取原始请求信息
      const originalRequest = ctx.request
      // 刷新token
      await refreshToken()
      // 使用新token重试请求
      return retryRequest(originalRequest)
    }
    return ctx
  }
})

实现考量

在实现这一功能时，需要考虑几个关键点：

1. 上下文对象设计：需要保持向后兼容，不影响现有代码
2. 请求信息完整性：确保包含足够的信息来重建请求
3. 性能影响：避免不必要的内存占用
4. 安全考虑：敏感信息如认证头需要妥善处理

最佳实践建议

基于这一改进，开发者可以更优雅地实现以下功能：

1. 自动token刷新：无缝处理认证过期问题
2. 请求重试机制：对特定错误实现自动重试
3. 请求日志：记录失败请求的完整信息用于调试
4. 错误分析：基于完整请求上下文实现更精细的错误处理

总结

VueUse作为Vue生态中的重要工具库，其网络请求功能的完善对开发者体验至关重要。通过在onFetchError钩子中提供原始请求信息，可以显著提升库在复杂场景下的实用性，特别是对于需要处理认证流程的现代Web应用。这一改进将使开发者能够构建更健壮、用户友好的应用程序，同时保持代码的简洁性和可维护性。