Vue3项目准备：utils工具插件文件夹中封装request.js配置axios请求基地址及超时时间、请求拦截器、响应拦截器

<think>好的，我现在需要帮用户解决在Vue3项目中封装网络请求的问题。用户的技术栈是Vue3、JavaScript、ElementPlus和Axios，所以首先要考虑如何结合这些技术进行合理的封装。 首先，我需要回顾Axios的基本封装方法。通常，创建一个Axios实例，设置基地址和超时时间，这是基础。然后，请求拦截器和响应拦截器是关键部分，用来处理全局的loading状态、错误提示和token处理。 接下来，用户用了ElementPlus，所以需要考虑如何与ElMessage和ElLoading结合。比如，在请求开始时显示loading，请求结束后关闭。同时，处理错误时用ElMessage提示用户。 然后是接口的统一管理。将不同模块的API按功能分类，这样便于维护。可能需要一个api目录，里面放各个模块的请求函数，比如user.js、product.js等。 还要考虑是否需要自动取消重复请求，防止用户频繁点击造成的问题。可以用CancelToken来处理，但需要确认用户是否有这个需求，或者是否属于高效稳定的一部分。 另外，TypeScript虽然用户没提到，但用户用的是JS，所以代码需要用纯JavaScript来写，避免TS语法。比如，接口定义可能需要用JSDoc来注释，但用户可能不需要太复杂的类型检查。 响应处理部分，需要统一处理错误码，比如401跳登录，403提示权限不足等。和后端约定好的结构，比如code、data、message，这些要在拦截器里处理。 关于Loading的控制，是否需要全局的，还是每个请求单独控制？可能提供一个配置项，让某些请求可以禁用loading，比如静默请求。 目录结构方面，src/utils/request.js作为Axios封装，src/api/存放各个模块的接口，这样结构清晰。 最后，示例代码需要测试，确保没有语法错误，比如ElLoading的调用方式是否正确，是否需要服务上下文等。在Vue3中使用ElLoading可能需要通过服务模式调用，但用户可能已经在正确配置了ElementPlus，所以示例代码需要准确。 总结步骤：创建Axios实例，配置拦截器处理loading和错误，统一接口管理，提供示例用法，并考虑扩展性如取消请求和配置项。</think>以下是为Vue3+JS+ElementPlus+Axios项目设计的网络请求封装方案，包含核心模块和最佳实践： --- ### 一、基础封装结构（推荐在`src/utils/request.js`） ```javascript import axios from &#39;axios&#39; import { ElMessage, ElLoading } from &#39;element-plus&#39; // 创建axios实例 const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // 从环境变量读取 timeout: 15000 // 超时时间 }) // 请求拦截器 service.interceptors.request.use( config => { // 全局loading控制（可选） config.loadingInstance = ElLoading.service({ lock: true, text: &#39;加载中...&#39;, background: &#39;rgba(0, 0, 0, 0.7)&#39; }) // 自动携带token（根据项目需求） const token = localStorage.getItem(&#39;token&#39;) if (token) { config.headers.Authorization = `Bearer ${token}` } return config }, error => { return Promise.reject(error) } ) // 响应拦截器 service.interceptors.response.use( response => { // 关闭loading response.config.loadingInstance?.close() const res = response.data // 根据业务状态码处理（需与后端约定） if (res.code !== 200) { ElMessage.error(res.message || &#39;Error&#39;) return Promise.reject(new Error(res.message || &#39;Error&#39;)) } return res }, error => { // 关闭loading error.config.loadingInstance?.close() // 处理HTTP错误状态码 if (error.response) { switch (error.response.status) { case 401: // 处理token过期 break case 403: ElMessage.error(&#39;无权访问&#39;) break case 500: ElMessage.error(&#39;服务器错误&#39;) break default: ElMessage.error(error.message) } } return Promise.reject(error) } ) export default service ``` --- ### 二、接口统一管理（推荐在`src/api`目录） ```javascript // src/api/user.js import request from &#39;@/utils/request&#39; export default { // GET示例 getUserList(params) { return request({ url: &#39;/user/list&#39;, method: &#39;get&#39;, params }) }, // POST示例 login(data) { return request({ url: &#39;/user/login&#39;, method: &#39;post&#39;, data }) } } ``` --- ### 三、组件中使用示例 ```javascript import userApi from &#39;@/api/user&#39; export default { methods: { async fetchData() { try { const res = await userApi.getUserList({ page: 1 }) console.log(&#39;获取数据:&#39;, res.data) } catch (error) { console.error(&#39;请求失败:&#39;, error) } } } } ``` --- ### 四、增强功能建议 1. **取消重复请求**（使用axios CancelToken） ```javascript // 在请求拦截器中添加 const pendingRequests = new Map() config.cancelToken = new axios.CancelToken(cancel => { const requestKey = `${config.method}-${config.url}` if (pendingRequests.has(requestKey)) { pendingRequests.get(requestKey)(&#39;取消重复请求&#39;) } pendingRequests.set(requestKey, cancel) }) ``` 2. **请求重试机制**（针对网络波动） ```javascript const retryCount = 2 // 重试次数 const retryDelay = 1000 // 重试间隔 service.interceptors.response.use(null, async error => { const config = error.config if (!config || !config.retry) return Promise.reject(error) config.__retryCount = config.__retryCount || 0 if (config.__retryCount >= retryCount) return Promise.reject(error) config.__retryCount += 1 await new Promise(resolve => setTimeout(resolve, retryDelay)) return service(config) }) ``` --- ### 五、最佳实践建议 1. **环境配置** ```env # .env.development VUE_APP_BASE_API = &#39;/api&#39; # .env.production VUE_APP_BASE_API = &#39;https://api.yourdomain.com&#39; ``` 2. **类型安全扩展**（可选） ```javascript // 在request.js中扩展响应类型 service.download = (url, params) => { return request({ url, method: &#39;get&#39;, params, responseType: &#39;blob&#39; }) } ``` 3. **全局配置覆盖** ```javascript // 调用时禁用loading userApi.getUserList(params, { showLoading: false }) // 在请求拦截器中处理 if (config.showLoading === false) { config.loadingInstance?.close() } ``` 该方案具备以下优势： - 统一错误处理机制 - 全局loading控制 - 灵活的配置覆盖能力 - 清晰的接口管理结构 - 完善的请求生命周期管理 - 支持业务扩展需求