Nuxt 3中useFetch在客户端导航时重复请求的问题解析

问题现象

在Nuxt 3项目中，当开发者将useFetch封装在自定义组合式函数中，并在页面间进行客户端导航时，会出现API请求被重复发送的情况。即使设置了server: true和lazy: true选项，也无法避免这个问题。

问题分析

这个问题主要源于Nuxt 3的页面导航机制和组合式函数的生命周期管理。当使用useFetch封装自定义API请求函数时，需要注意以下几点：

1. 客户端导航的特殊性：Nuxt 3的客户端导航（如使用navigateTo或<NuxtLink>）不会完全重新加载页面，而是通过JavaScript动态更新内容。这会导致某些组合式函数被重新执行。

2. 组合式函数的重新执行：在客户端导航时，页面组件会被重新挂载，导致组合式函数中的useFetch被再次调用，即使数据已经在服务端获取。

3. 缓存机制的限制：虽然useFetch提供了key选项用于缓存，但在自定义封装中如果没有正确传递或处理这个key，缓存机制可能无法正常工作。

解决方案

方案一：合理使用KeepAlive

在布局组件中为<NuxtPage>添加keepalive属性，可以保留页面状态，避免组件被完全卸载和重新挂载：

<template>
  <NuxtPage keepalive />
</template>

这种方式适合大多数场景，能有效减少不必要的重复请求。

方案二：优化组合式函数实现

在自定义的useApi函数中，可以增加额外的逻辑来控制请求行为：

export function useApi<T>(url: string, options: UseFetchOptions<T> = {}) {
  // 确保为每个请求设置唯一的key
  const finalOptions = {
    key: url,
    server: true,
    lazy: true,
    ...options
  }
  
  // 其余实现逻辑...
}

方案三：区分服务端和客户端行为

可以根据当前环境调整请求策略：

export function useApi<T>(url: string, options: UseFetchOptions<T> = {}) {
  const isClient = import.meta.client
  
  const finalOptions = {
    ...options,
    // 在客户端只从缓存获取，不主动发起新请求
    immediate: !isClient
  }
  
  // 其余实现逻辑...
}

最佳实践建议

1. 统一请求管理：建议将API请求集中管理，避免在多个组件中直接调用useFetch。

2. 合理使用缓存：为每个请求设置明确的key，利用Nuxt的缓存机制减少重复请求。

3. 考虑请求必要性：分析哪些数据需要在服务端获取，哪些可以在客户端获取，优化请求策略。

4. 错误处理完善：在自定义API函数中实现完整的错误处理逻辑，包括网络错误、业务错误等。

总结

Nuxt 3的useFetch在自定义封装后出现重复请求的问题，主要源于对客户端导航和组合式函数生命周期的理解不足。通过合理使用KeepAlive、优化组合式函数实现以及区分环境行为，可以有效解决这个问题。在实际项目中，建议开发者根据具体场景选择最适合的解决方案，并建立统一的API请求管理规范。

理解Nuxt 3的这些特性，不仅能解决当前问题，还能帮助开发者构建更高效、更稳定的应用架构。