关于axios二次封装

<think>嗯，用户想找关于Axios二次封装的示例代码或教程。好的，我得先回忆一下Axios二次封装的常见做法。用户可能希望有一个结构清晰的例子，最好用TypeScript，因为现在很多项目都用TS了。首先，我需要创建一个axios实例，这样可以自定义配置，比如基础URL和超时时间。然后，添加请求和响应拦截器，处理全局的错误和加载状态。比如在请求头里加Token，用拦截器统一处理401错误，跳转到登录页面。另外，用户可能需要处理不同的环境配置，比如开发和生产环境的不同基础URL。封装后的请求方法应该支持GET、POST等，并且返回Promise方便调用。还要考虑TypeScript的类型支持，比如泛型来定义响应数据的结构。可能还需要取消请求的功能，防止重复提交。不过用户给的示例代码里没提到取消请求，可能暂时不需要，但可以作为一个扩展点提一下。另外，参考用户提供的引用，他们提到了挂载到Vue全局，所以在示例里可以补充如何将封装后的axios挂载到Vue3的全局属性，比如使用app.config.globalProperties。最后，生成相关问题，比如为什么要二次封装，拦截器的作用，如何结合TypeScript，不同环境配置，以及如何与Vuex或Pinia配合。要确保回答结构清晰，代码正确，语法正确，特别是LaTeX格式的应用。比如在提到数学公式时用$...$，比如$baseURL$这样的变量。还要注意引用标识的位置，比如在提到统一处理错误时添加[^1]。检查是否有遗漏的步骤，比如错误处理的示例代码，响应数据结构的定义，还有示例的使用方法，让用户更容易理解。确保代码块使用正确的语法高亮，比如标注是TypeScript。可能还需要解释每个部分的作用，比如拦截器里的config处理，响应数据的解构。用户可能需要实际可运行的代码，所以示例要完整，比如导出封装后的request实例，并在main.ts中引入和挂载。最后，相关问题要覆盖常见的使用场景和问题，帮助用户进一步学习。</think>### Axios二次封装实现步骤与示例代码 Axios二次封装的核心目标是实现以下功能： 1. 统一错误处理 2. 基础路径配置 3. 请求头自动携带Token 4. 全局加载状态管理 5. 响应数据格式标准化 6. 支持TypeScript类型校验 #### 一、基础封装实现（TypeScript版） ```typescript // utils/request.ts import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios' // 定义响应数据格式 interface ResponseData<T = any> { code: number data: T message: string } class Request { private instance: AxiosInstance constructor(config: AxiosRequestConfig) { this.instance = axios.create({ timeout: 10000, baseURL: import.meta.env.VITE_API_BASEURL, // 环境变量配置 ...config }) this.setInterceptors() } // 设置拦截器 private setInterceptors() { // 请求拦截 this.instance.interceptors.request.use(config => { const token = localStorage.getItem('token') if (token) { config.headers!['Authorization'] = `Bearer ${token}` } return config }) // 响应拦截 this.instance.interceptors.response.use( (response: AxiosResponse<ResponseData>) => { if (response.data.code !== 200) { return Promise.reject(response.data) } return response.data.data }, error => { if (error.response?.status === 401) { window.location.href = '/login' } return Promise.reject(error) } ) } // 封装请求方法 public get<T>(url: string, config?: AxiosRequestConfig): Promise<T> { return this.instance.get(url, config) } public post<T>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> { return this.instance.post(url, data, config) } // 其他方法同理... } export default new Request({}) ``` #### 二、配置环境变量 ```env # .env.development VITE_API_BASEURL = /api ``` ```env # .env.production VITE_API_BASEURL = https://api.example.com ``` #### 三、Vue3全局挂载 ```typescript // main.ts import { createApp } from 'vue' import App from './App.vue' import request from './utils/request' const app = createApp(App) // 挂载到全局属性 app.config.globalProperties.$request = request // 类型声明扩展 declare module '@vue/runtime-core' { interface ComponentCustomProperties { $request: typeof request } } ``` #### 四、使用示例 ```typescript // 在组件中使用 import { getCurrentInstance } from 'vue' export default { setup() { const { proxy } = getCurrentInstance()! const fetchData = async () => { try { const data = await proxy!.$request.get('/user/list') console.log(data) } catch (error) { console.error('请求失败:', error) } } return { fetchData } } } ``` ### 关键特性解析 1. **类型安全**：通过泛型$T$定义响应数据类型，确保类型校验 2. **环境适配**：通过$import.meta.env$实现不同环境配置切换 3. **自动鉴权**：请求拦截器自动注入$Bearer Token$[^1] 4. **错误处理**：统一处理401未授权状态码跳转登录页 5. **响应过滤**：通过拦截器剥离多层嵌套响应数据