js 接口请求失败重复请求

### Vue3 中 Axios 封装请求接口失败解决方案 在 Vue3 项目中，封装 Axios 是一种常见的做法，它能够提升代码的复用性和可维护性。然而，在实际开发过程中可能会遇到一些问题，比如跨域错误、重复请求冲突或者配置不当等问题。 以下是针对 Vue3 中封装 Axios 请求接口失败的一些常见原因及其解决方案： #### 1. 跨域问题 如果服务器未设置允许跨域访问，则浏览器会阻止前端发送的请求并抛出 CORS 错误。可以通过以下方式解决： - **服务端配置**：确保后端支持跨域资源共享 (CORS)，通常通过设置 HTTP 响应头 `Access-Control-Allow-Origin` 来实现[^1]。 - **代理配置**：在本地开发环境中使用 Webpack 或 Vite 的代理功能来转发请求到目标地址。例如，在 Vite 配置文件中添加如下内容： ```javascript export default { server: { proxy: { '/api': 'http://localhost:8000', }, }, }; ``` #### 2. 请求拦截器中的取消逻辑 当多个相同的请求被触发时，可能导致数据混乱或性能下降。为了防止这种情况发生，可以在请求拦截器中加入取消机制。具体实现方法已在引用[2]中有描述[^2]。下面是一个改进版的例子： ```javascript import axios from 'axios'; class CancelRequest { constructor() { this.pending = {}; } addPending(config) { const url = config.url; if (url && !this.pending[url]) { this.pending[url] = true; } } removePending(config) { const url = config.url; if (url) delete this.pending[url]; } clearAllPending() { this.pending = {}; } } const cancelTokenManager = new CancelRequest(); const instance = axios.create({ baseURL: process.env.VUE_APP_BASE_API, }); instance.interceptors.request.use((config) => { cancelTokenManager.addPending(config); config.cancelToken = new axios.CancelToken((cancel) => { config._cancel = () => { cancel('Duplicate request'); }; }); return config; }, (error) => Promise.reject(error)); instance.interceptors.response.use( (response) => response.data, (error) => { if (axios.isCancel(error)) { console.warn('Request canceled:', error.message); } else { return Promise.reject(error); } } ); export default instance; ``` #### 3. 接口路径拼接不正确 有时由于基础 URL 设置有误或动态参数传递异常，也会导致请求失败。例如，引用[3]提到的一个场景是接口返回的数据包含了完整的绝对路径而非相对路径[^3]。此时需注意调整 API 地址定义规则以及环境变量管理策略。 最后附上一段简单的 Vue3 组件调用封装后的 Axios 实例示范代码片段供参考： ```typescript <template> <div>{{ result }}</div> </template> <script lang="ts"> import { defineComponent, ref } from 'vue'; import apiClient from '@/utils/api-client'; // 自己创建好的 axios 实例模块 export default defineComponent({ setup() { const result = ref<string>(''); async function fetchData() { try { const res = await apiClient.get('/example-endpoint'); // 替换成实际使用的 endpoint result.value = JSON.stringify(res); } catch (err) { console.error(err); } } fetchData(); return { result }; }, }); </script> ```