vue3二次封装axios

在Vue 3项目中二次封装`axios`可以提高项目的可维护性和复用性，让网络请求更加简洁、高效。以下是简单的步骤和注意事项： ### 封装原因 直接使用 `axios` 发起 HTTP 请求虽然简单方便，但在大型项目中会存在一些不便之处： - 每次发起请求都要导入 `axios` - 错误处理分散 - 需要在每个请求上添加相同的配置项（例如基础URL） 因此我们通常会对它做一层简单的封装。 ### 实现过程 #### 安装依赖包 首先需要安装 axios 和其他可能要用到的工具库如 qs (用于序列化查询字符串) 等: ```bash npm install axios qs ``` #### 创建实例并设置默认值 创建一个新的文件夹比如命名为“api”，然后在里面新建一个名为 `request.js` 的文件，在里面完成对 axios 的基本配置工作如下所示： ```javascript // src/api/request.js import axios from 'axios'; import { ElMessage } from 'element-plus'; // 引入消息提示组件 import router from '../router/index'; const service = axios.create({ baseURL: import.meta.env.VITE_APP_BASE_API, // 根据环境变量动态切换baseURL timeout: 5000 // 设置超时时间 }); // request拦截器 service.interceptors.request.use( config => { const token = localStorage.getItem('token'); if(token){ config.headers['Authorization'] = "Bearer "+token; } return config; }, error => Promise.reject(error) ); // response拦截器 service.interceptors.response.use( res => ({ ...res.data }), // 直接返回数据体部分 err => { let message = ''; switch(err.response.status){ case 401: message='身份验证失败'; break; case 403: message='权限不足'; break; case 404: message="找不到资源"; break; default: message=err.message||"服务器错误"; } ElMessage.error(message); if([401].includes(err.response.status)){ router.push('/login'); // 身份过期自动跳转登录页 } return Promise.reject(err); } ) export default service; ``` 通过这种方式我们就完成了最基础的一层封装，并加入了对于全局异常情况的统一捕获机制以及鉴权相关的操作等实用功能；当然还可以继续优化这个模板以满足业务需求下的更多个性化定制。