vue3axios二次封装如何添加headers

### Vue3 中 Axios 二次封装示例教程 在 Vue3 中对 Axios 进行二次封装，可以提升代码的可维护性和复用性。以下是一个完整的封装示例，包括请求拦截器、响应拦截器以及错误处理等功能。 #### 1. 配置 Axios 实例 首先创建一个独立的文件（如 `axios.ts` 或 `axios.js`），用于配置 Axios 实例的基础信息。 ```typescript // axios.ts import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'; // 创建 Axios 实例 const service: AxiosInstance = axios.create({ baseURL: import.meta.env.VITE_APP_BASE_API, // 根据环境变量设置基础 URL timeout: 5000, // 请求超时时间 headers: { 'Content-Type': 'application/json;charset=UTF-8', }, }); // 请求拦截器 service.interceptors.request.use( (config: AxiosRequestConfig) => { // 在发送请求之前做些什么，例如添加 Token const token = localStorage.getItem('token'); if (token) { config.headers.Authorization = `Bearer ${token}`; } return config; }, (error) => { // 对请求错误做些什么 return Promise.reject(error); } ); // 响应拦截器 service.interceptors.response.use( (response: AxiosResponse) => { // 对响应数据做点什么 const res = response.data; if (res.code !== 200) { // 自定义错误处理逻辑 console.error(`Error: ${res.message}`); return Promise.reject(new Error(res.message || 'Request failed')); } else { return res; } }, (error) => { // 对响应错误做点什么 console.error('Request error:', error.message); return Promise.reject(error); } ); export default service; ``` [^5] #### 2. 封装通用请求方法 为了简化页面中的调用逻辑，可以进一步封装常用的 HTTP 方法（如 GET、POST 等）。 ```typescript // request.ts import service from './axios'; interface RequestOptions extends AxiosRequestConfig { [key: string]: any; // 允许额外的自定义参数 } class Request { public get<T = any>(url: string, params?: object, options?: RequestOptions): Promise<T> { return service.get(url, { params, ...options }); } public post<T = any>(url: string, data?: object, options?: RequestOptions): Promise<T> { return service.post(url, data, options); } public put<T = any>(url: string, data?: object, options?: RequestOptions): Promise<T> { return service.put(url, data, options); } public delete<T = any>(url: string, options?: RequestOptions): Promise<T> { return service.delete(url, options); } } export default new Request(); ``` [^4] #### 3. 页面中使用封装后的 Axios 在 Vue 组件中可以直接调用封装好的请求方法，代码更加简洁。 ```vue <template> <div> <h1>Axios 二次封装测试</h1> <p v-if="userInfo">用户名: {{ userInfo.name }}</p> <p v-if="userInfo">邮箱: {{ userInfo.email }}</p> </div> </template> <script setup lang="ts"> import request from '../utils/request'; import { onMounted, ref } from 'vue'; const userInfo = ref<any>(null); onMounted(() => { request .post('/user/login', { username: 'admin', password: '111111', }) .then((res) => { userInfo.value = res.data; }) .catch((err) => { console.error('Login failed:', err.message); }); }); </script> <style scoped></style> ``` [^3] #### 4. Mock 数据支持 如果项目需要支持 Mock 数据，可以在 Vite 配置中引入相关插件。 ```typescript // vite.config.ts import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; import viteMockServe from 'vite-plugin-mock'; export default defineConfig(({ command }) => { return { plugins: [ vue(), viteMockServe({ localEnabled: command === 'serve', // 开发环境下启用 Mock }), ], }; }); ``` [^2] --- ###

### Vue 3 中 Axios 二次封装 Token 处理 为了在 Vue 3 应用程序中实现 Axios 的二次封装来处理 Token，可以创建一个专门用于 HTTP 请求的工具模块 `http.js` 或者类似的名称。此模块不仅负责初始化 Axios 实例还应设置默认请求头以及拦截器以便自动加入和刷新 Token。 #### 创建 Axios 工具类 ```javascript // 文件路径: src/utils/http.js import axios from 'axios'; import { ElMessage } from 'element-plus'; const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // api base_url timeout: 5000 // 请求超时时间 }); // 请求拦截器 service.interceptors.request.use( config => { // 在发送请求之前做些什么 const token = localStorage.getItem('token'); if (token) { config.headers['Authorization'] = `Bearer ${token}`; } return config; }, error => { // 对请求错误做些什么 Promise.reject(error); } ); // 响应拦截器 service.interceptors.response.use( response => { // 对响应数据做点什么 return response.data; }, async error => { let message = ''; switch (error.response.status) { case 401: message = '未授权，请重新登录'; break; case 403: message = '拒绝访问'; break; case 404: message = '请求地址出错'; break; case 500: message = '服务器内部错误'; break; default: message = '连接服务器失败'; } ElMessage.error(message); // 如果返回的状态码为401，则跳转至登录界面 if (error.response.status === 401 && !location.href.includes('/login')) { window.location.href = '/login'; } return Promise.reject(error); } ); export function getAxios(url, params = {}) { return service.get(url, {params}); } export function postAxios(url, data = {}, config = {}) { return service.post(url, data, {...config}); } ``` 上述代码展示了如何通过定义自定义的 Axios 实例来进行 API 调用，并且设置了两个重要的部分——请求前缀与响应后缀处理器[^1]。每当发起一个新的网络请求时都会先经过这些钩子函数；同样地，当接收到服务端回复之后也会触发相应的逻辑判断是否需要更新用户的认证状态或者其他操作。 对于 Token 的管理，可以在每次发出请求的时候检查本地存储中的 Token 是否存在并将其附加到 Authorization 字段下作为 Bearer 类型的身份验证凭证。如果遇到鉴权失败的情况（比如过期），则提示用户重新登陆或者执行其他必要的措施以维持会话的有效性[^2]。 此外，在实际项目开发过程中还可以考虑集成更多功能如加载指示符显示、取消重复请求等功能进一步优化用户体验和服务交互效率[^3]。