怎么写封装axios请求

### Vue3 中封装 Axios 请求的完整示例 在 Vue3 项目中，为了提高代码可维护性和复用性，通常会对 Axios 进行二次封装。以下是基于提供的引用内容和最佳实践的一个完整封装方案。 #### 1. ### 创建 Axios 实例 首先，在项目的 `src/request` 目录下新建一个名为 `axiosInstance.js` 的文件，用于初始化 Axios 并配置通用参数。 ```javascript // src/request/axiosInstance.js import axios from 'axios'; const service = axios.create({ baseURL: import.meta.env.VUE_APP_BASE_URL, // 动态读取环境变量中的基础 URL [^3] timeout: 5000, // 超时时间 (毫秒) [^3] }); export default service; ``` 这里利用了 Vue3 支持的 `import.meta.env` 来动态获取 `.env` 文件中的环境变量作为基础 URL[^4]。 --- #### 2. ### 添加请求拦截器 接着在同一文件中添加请求拦截器，以便统一处理请求头或其他必要逻辑。 ```javascript service.interceptors.request.use( config => { // 在发送请求之前做些什么 const token = localStorage.getItem('token'); // 获取存储的 Token if (token && !config.headers.Authorization) { config.headers['Authorization'] = `Bearer ${token}`; // 设置认证头部 [^3] } return config; }, error => { // 对请求错误做些什么 return Promise.reject(error); } ); ``` --- #### 3. ### 添加响应拦截器 同样地，我们可以在同一文件中定义响应拦截器，用来集中管理接口返回的状态码或异常情况。 ```javascript service.interceptors.response.use( response => { // 对响应数据做点什么 const res = response.data; if (!res.success) { // 自定义判断条件，假设 success 表示接口调用是否成功 Message.error(res.message || 'Error'); return Promise.reject(new Error(res.message || 'Request failed')); } else { return res; } }, error => { // 对响应错误做点什么 if (error.response) { switch (error.response.status) { case 401: MessageBox.confirm('登录已过期，请重新登录', '提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => { window.location.href = '/login'; // 跳转到登录页 }); break; case 403: Message.error('权限不足'); break; case 404: Message.error('请求地址不存在'); break; case 500: Message.error('服务器内部错误'); break; default: Message.error(`未知错误：${error.message}`); } } else { Message.error(`网络连接失败`); } return Promise.reject(error); } ); export default service; ``` 注意此处使用了 Element Plus 组件库的消息框组件 (`Message`, `MessageBox`) ，可以根据实际需求替换为其他 UI 框架对应的工具[^3]。 --- #### 4. ### 定义常用方法 继续扩展该模块的功能，提供常用的 HTTP 方法如 GET 和 POST 等。 ```javascript // src/request/index.js import service from './axiosInstance'; export function request(config) { return service(config).catch(err => { throw err; }); } export function get(url, params) { return request({ method: 'GET', url, params }); } export function post(url, data) { return request({ method: 'POST', url, data }); } export function put(url, data) { return request({ method: 'PUT', url, data }); } export function del(url, params) { return request({ method: 'DELETE', url, params }); } ``` --- #### 5. ### 注册到全局属性 为了让整个应用都能方便访问这些封装好的函数，可以通过以下方式将其注册到 Vue 实例的全局属性中。 ```javascript // main.js 或 setup.js import { createApp } from 'vue'; import App from './App.vue'; import { get, post, put, del } from './request'; const app = createApp(App); app.config.globalProperties.$get = get; app.config.globalProperties.$post = post; app.config.globalProperties.$put = put; app.config.globalProperties.$del = del; export default app.mount('#app'); ``` 此时便可在任何地方通过 `this.$get()` 或者组合式 API 下的 `getCurrentInstance().appContext.config.globalProperties.$get()` 访问它们[^4]。 --- #### 6. ### 使用示例 最后展示一下如何在组件内调用这个封装后的 Axios 接口。 ```javascript <template> <div>{{ result }}</div> </template> <script> import { ref } from 'vue'; import { useRoute } from 'vue-router'; import { getCurrentInstance } from 'vue'; export default { setup() { const internalInstance = getCurrentInstance(); const route = useRoute(); const result = ref(''); async function fetchData() { try { const res = await internalInstance.appContext.config.globalProperties.$get('/example/data', { id: route.query.id }); result.value = JSON.stringify(res); } catch (err) { console.error(err); } } fetchData(); return { result }; } }; </script> ``` 或者更简洁的方式是在选项式 API 中直接写成 `this.$get(...)`[^2]。 --- ###