vue网络请求出现大量pending解决方案

### Vue2 中接口重复请求的原因 在 Vue2 开发过程中，接口重复请求是一个常见的问题。主要原因可以归纳为以下几个方面： - **生命周期钩子多次执行**：`mounted` 钩子理论上应该只被调用一次，但在某些情况下可能会因为路由导航守卫或其他逻辑错误而被多次触发[^2]。 - **异步操作未妥善管理**：如果在一个组件内发起多个异步请求，并且这些请求之间缺乏有效的协调机制，则可能导致不必要的重复请求。 - **缺少取消机制**：对于长时间运行的任务或是用户快速连续点击等情况下的请求，如果没有适当的方法去取消之前的请求，就会造成新的请求不断叠加旧有请求之上[^1]。 ### 解决方案概述 针对上述提到的各种情况，以下是几种可行的解决方案： #### 使用 Axios 取消令牌防止重复请求 为了有效控制并发请求的数量并避免因网络延迟等原因造成的重复提交现象，在基于 `axios` 的项目中可以通过创建一个全局唯一的取消令牌实例来达到目的。具体做法如下所示[^3]: ```javascript // 定义取消类 class CancelRequest { constructor() { this.pending = {}; } addPending(config) { const url = config.url + '&' + config.method; config.cancelToken = new axios.CancelToken((cancel) => { if (!this.pending[url]) { this.pending[url] = cancel; } }); } removePending(config) { const url = config.url + '&' + config.method; if (this.pending[url]) { this.pending[url]('Operation canceled by the user.'); delete this.pending[url]; } } getCancelToken(config) { this.addPending(config); return config.cancelToken; } } const instance = axios.create({}); let cancelInstance = new CancelRequest(); instance.interceptors.request.use( (config) => { // 移除已存在的同名请求 cancelInstance.removePending(config); // 添加当前请求至待处理列表 config.cancelToken = cancelInstance.getCancelToken(config); return config; }, (error) => Promise.reject(error), ); ``` 这段代码展示了如何利用自定义的 `CancelRequest` 类配合 `axios` 提供的功能实现对 HTTP 请求的有效管理和清理工作。 #### 利用缓存 Hook 减少无谓的数据获取行为 除了直接干预请求本身外，还可以借助前端框架特性——即 Hooks 来构建更高效的业务逻辑层面上的数据加载策略。通过引入简单的内存级缓存技术，可以在一定程度上缓解由于频繁交互带来的性能损耗问题[^4]. ```typescript import { ref, computed } from 'vue'; function useApiCache<T>(key: string | number, fetcherFn: () => Promise<T>): T[] { let cacheData = localStorage.getItem(key); const dataRef = ref(cacheData ? JSON.parse(cacheData) : []); const loadingRef = ref(false); async function fetchData(): Promise<void> { try { if(!loadingRef.value){ loadingRef.value=true; const result = await fetcherFn(); dataRef.value=[...dataRef.value,result]; localStorage.setItem(key,JSON.stringify(dataRef.value)); } } catch (_) {} finally{ loadingRef.value=false; } } return [ computed(() => dataRef.value), fetchData, ]; } ``` 此示例提供了一个简易版的 API 调用缓存 hook 实现方式，能够帮助开发者轻松应对那些需要反复读取同一份数据资源的应用场景需求。