nuxt3 usefetch 重复请求 getUrl

### Nuxt3 中 `useFetch` 导致重复请求 `getUrl` 的解决方案 在 Nuxt3 应用程序中，`useFetch` 是一个用于发起 HTTP 请求的组合式函数。然而，在某些场景下可能会遇到重复请求的问题。为了避免这种情况的发生，可以采取以下措施： #### 使用缓存机制 通过设置合适的缓存策略，能够有效减少不必要的网络调用次数。对于静态资源或者短期内不会频繁变化的数据接口来说尤为适用。 ```javascript const { data, pending, error } = await useFetch('/api/data', { key: 'unique-key-for-this-request', }); ``` 这里的 `key` 参数起到了至关重要的作用[^1]。它作为唯一标识符帮助区分不同的 fetch 调用，并确保相同 URL 下仅执行一次实际加载操作。 #### 利用拦截器优化请求流程 除了调整 API 层面外，还可以借助 Axios 提供的强大中间件能力——即所谓的“拦截器”。这允许开发者分别针对发出前后的通信过程实施自定义逻辑控制，比如取消未完成的任务或是合并相似项等。 ```javascript // 定义全局配置对象 const instance = axios.create({ baseURL: process.env.VUE_APP_BASE_API, }); instance.interceptors.request.use( (config) => { const cancelTokenSource = axios.CancelToken.source(); // 存储cancel方法以便后续可能需要终止当前异步动作 store.commit('addPendingRequest', cancelTokenSource); config.cancelToken = cancelTokenSource.token; return config; }, (err) => Promise.reject(err), ); instance.interceptors.response.use( () => {}, ({ response }) => { if (!response.config._retry) { // 处理特定条件下的重试逻辑... } return Promise.resolve(response); }, ); ``` 上述代码片段展示了如何利用 Axios 拦截器实现更精细粒度的操作管理[^2][^3]。值得注意的是，虽然这里展示的例子主要围绕着错误恢复展开讨论，但在实践中完全可以根据项目需求灵活扩展其用途范围至其他方面，例如去重过滤等功能特性之上。 #### 封装统一的服务层 为了提高可维护性和复用率，建议将所有与外部服务器交互相关的业务封装成独立模块。这样做不仅有助于保持良好的架构设计原则，同时也便于集中处理诸如身份验证令牌刷新之类跨域问题。 ```typescript // src/services/api.ts import axios from "axios"; export default class ApiService { private static _instance?: ApiService; public static getInstance(): ApiService { if (!ApiService._instance) { ApiService._instance = new ApiService(); } return ApiService._instance!; } constructor() {} async getNavigationList(params?: any): Promise<any> { try { const result = await this.http.get("/navigation", { params }); return result.data; } catch (e) { throw e; } } private get http() { let token = localStorage.getItem("token"); return axios.create({ headers: { Authorization: `Bearer ${token}` }, }); } } ``` 此段 TypeScript 实现了一个简单的单例模式服务类[^4]，其中包含了获取导航列表的方法以及私有的 HTTP 客户端实例化方式。这样做的好处是可以轻松地在整个应用程序内共享相同的连接池并应用一致的安全策略。