vue3使用calss类封装axios

<think> 我们正在讨论Vue 3中使用class类封装axios的方法。根据用户需求，我们需要提供一个清晰的实现方案。 在Vue3中，我们通常使用Composition API，但封装axios可以使用类（class）的方式，这样可以利用面向对象的特性，如封装、继承等。 我们将创建一个名为`HttpClient`的类，它封装了axios的基本请求方法（如get、post等），并可以统一处理请求配置、拦截器和错误处理。 步骤： 1. 安装axios（如果尚未安装） 2. 创建一个类，构造函数中初始化axios实例，并设置基本配置（如baseURL）。 3. 在类中定义请求方法（get, post, put, delete等）。 4. 添加请求拦截器和响应拦截器，用于全局处理（例如添加token、统一错误处理）。 5. 将封装的类导出，以便在Vue组件或其他地方使用。 注意：在Vue3中，我们通常不会将封装的axios类直接绑定到Vue原型上（因为Vue3没有原型），但可以通过provide/inject或直接导入使用。 下面提供一个示例代码： 首先，确保安装了axios：`npm install axios` 然后，创建一个文件（例如`httpClient.js`）： </think> ### Vue 3 中使用 Class 类封装 Axios 的方法 在 Vue 3 中使用 Class 封装 Axios 可以提高代码复用性和可维护性，以下是完整实现方案： #### 1. 创建 Axios 封装类 ```typescript // src/utils/http.ts import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios' class HttpClient { private instance: AxiosInstance private readonly baseURL: string = import.meta.env.VITE_API_BASE_URL constructor() { this.instance = axios.create({ baseURL: this.baseURL, timeout: 10000, headers: { 'Content-Type': 'application/json' } }) this.setupInterceptors() } // 请求拦截器 private setupInterceptors() { this.instance.interceptors.request.use( (config) => { // 添加认证 token const token = localStorage.getItem('token') if (token) { config.headers.Authorization = `Bearer ${token}` } return config }, (error) => Promise.reject(error) ) // 响应拦截器 this.instance.interceptors.response.use( (response) => response.data, (error) => { // 统一错误处理 if (error.response?.status === 401) { // 处理未授权 } return Promise.reject(error.response?.data || error.message) } ) } // 公共请求方法 public request<T = any>(config: AxiosRequestConfig): Promise<T> { return this.instance.request(config) } public get<T = any>(url: string, config?: AxiosRequestConfig): Promise<T> { return this.request({ ...config, method: 'GET', url }) } public post<T = any>( url: string, data?: any, config?: AxiosRequestConfig ): Promise<T> { return this.request({ ...config, method: 'POST', url, data }) } // 可继续添加 put、delete 等方法... } export default new HttpClient() ``` #### 2. 在 Vue 组件中使用 ```vue <!-- src/components/UserList.vue --> <script setup lang="ts"> import { ref, onMounted } from 'vue' import http from '@/utils/http' interface User { id: number name: string email: string } const users = ref<User[]>([]) // 获取用户数据 const fetchUsers = async () => { try { users.value = await http.get<User[]>('/users') } catch (error) { console.error('获取用户失败:', error) } } // 创建新用户 const createUser = async () => { await http.post('/users', { name: '新用户', email: '[email protected]' }) fetchUsers() // 刷新列表 } onMounted(fetchUsers) </script> ``` #### 3. 主要优势 1. **统一配置管理**：集中管理 baseURL、超时时间等全局配置 2. **拦截器封装**： - 自动添加身份验证 token - 统一响应格式处理 - 全局错误处理（401 未授权等） 3. **类型安全**：通过 TypeScript 泛型确保数据类型一致性 4. **方法复用**：封装 GET/POST 等常用方法，减少重复代码 #### 4. 高级扩展 ```typescript // 扩展请求取消功能 import { CancelTokenSource } from 'axios' class HttpClient { // ... 原有代码 private cancelTokenSources: Map<string, CancelTokenSource> = new Map() public cancelRequest(requestId: string) { const source = this.cancelTokenSources.get(requestId) source?.cancel(`请求 ${requestId} 已被取消`) this.cancelTokenSources.delete(requestId) } public get<T = any>( url: string, config?: AxiosRequestConfig & { requestId?: string } ): Promise<T> { const source = axios.CancelToken.source() if (config?.requestId) { this.cancelTokenSources.set(config.requestId, source) } return this.request({ ...config, method: 'GET', url, cancelToken: source.token }) } } ``` >[!NOTE] >实际部署时需在 `.env` 文件配置 `VITE_API_BASE_URL`，并通过 `import.meta.env` 读取[^1]