企业级Vue项目中axios的封装与使用

"本文主要介绍了如何在企业级Vue项目中高效使用axios，通过创建和配置axios实例，以及设置请求和响应拦截器，实现接口请求的统一管理和优化。" 在大型Vue项目中，处理HTTP请求是必不可少的工作，而针对众多的接口，如果每个接口都单独创建axios实例，会导致代码冗余，不易维护。为了解决这个问题，企业级项目通常会将axios请求进行封装和抽离。以下是一个示例，展示了如何在request.js文件中进行配置： 首先，引入Vue和axios库： ```javascript import Vue from 'vue'; import axios from 'axios'; ``` 接着，创建一个axios实例并设置基础URL和超时时间： ```javascript const service = axios.create({ baseURL: '/user', // 基础地址 timeout: 6000 // 请求超时时间 }); ``` 然后，添加请求拦截器，用于处理如携带Token、防止浏览器缓存等问题： ```javascript service.interceptors.request.use(config => { const token = Vue.ls.get("ACCESS_TOKEN"); // 获取存储的Token if (token) { config.headers['X-Access-Token'] = token; // 设置请求头 } if (config.method === 'get') { config.params = { _t: Date.parse(new Date()) / 1000, // 防止缓存，添加时间戳 ...config.params }; } return config; }, (error) => { return Promise.reject(error); }); ``` 在请求拦截器中，我们还可以做更多的预处理工作，例如校验权限、添加全局参数等。 接下来，设置响应拦截器来处理可能出现的错误情况： ```javascript service.interceptors.response.use( response => response, error => { const err = error; if (err.response) { switch (err.response.status) { case 401: console.log({ message: '系统提示', description: '未授权，请重新登录', duration: 4 }); break; case 403: console.log({ message: '系统提示', description: '拒绝访问' }); break; case 404: console.log({ message: '系统提示', description: '未找到资源' }); break; // 其他错误状态处理... } } return Promise.reject(err); } ); ``` 响应拦截器可以捕获并处理服务器返回的错误，例如401（未授权）、403（禁止访问）和404（未找到），以便给用户反馈或执行相应的操作。 最后，将这个配置好的axios实例导出，供其他组件或模块使用： ```javascript export default service; ``` 这样，在Vue项目中，只需要导入这个封装好的axios实例，就可以方便地发起HTTP请求，同时保持代码整洁，易于维护。通过这种方式，开发者可以专注于业务逻辑，而不用关心底层网络请求的细节。