### Nuxt3 中 `useFetch` 导致
重复请求 `get
Url` 的解决方案
在 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({
base
URL: 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 客户端实例化方式。这样
做的好处是可以轻松地在整个应用程序内共享
相同的连接池并应用一致的安全策略。
扫一扫
1536
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
