前端项目开发技巧-使用TypeScript二次封装Axios

### 什么是 Axios 的二次封装 Axios 是一种强大的 HTTP 客户端工具，广泛应用于前端开发中。为了增强其功能并适应复杂的业务场景，通常会对 Axios 进行二次封装。这种封装可以集中管理请求配置、错误处理逻辑以及全局状态控制。 以下是基于 TypeScript 实现的一个完整的 Axios 二次封装示例： --- ### 封装实现 #### 创建 Axios 实例 通过自定义 Axios 配置来初始化一个新的 Axios 实例，从而简化后续调用中的重复参数设置。 ```typescript import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'; const service: AxiosInstance = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // 设置基础 URL 地址 timeout: 5000, // 请求超时时间 (毫秒) }); ``` 此部分代码设置了 `baseURL` 和 `timeout` 参数[^1]，使每次发起请求时无需手动指定这些选项。 --- #### 添加请求拦截器 在请求发出之前对其进行预处理操作，例如添加认证令牌或修改请求数据结构。 ```typescript service.interceptors.request.use( (config: AxiosRequestConfig): AxiosRequestConfig => { const token = localStorage.getItem('token'); // 获取存储的 Token if (token && config.headers) { config.headers['Authorization'] = `Bearer ${token}`; // 自动附加到请求头部 } return config; }, (error: any) => { console.error(error); // 打印错误日志 return Promise.reject(error); } ); ``` 这段代码展示了如何利用请求拦截器自动注入身份验证所需的 Bearer Token[^2]。 --- #### 添加响应拦截器 当服务器返回的数据到达客户端后，可以通过响应拦截器进一步加工或者统一处理异常情况。 ```typescript service.interceptors.response.use( (response: AxiosResponse<any>): any => { const res = response.data; // 如果接口返回的状态码不等于 200，则认为是有误的情况 if (res.code !== 200) { Message.error(res.message || 'Error'); return Promise.reject(new Error(res.message || 'Error')); } return res; }, (error: any) => { if (error.response?.status === 401) { MessageBox.confirm('登录已过期，请重新登录', '确认登出', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => { window.location.href = '/login'; // 跳转至登录页面 }); } return Promise.reject(error); } ); ``` 这里实现了针对不同类型的错误反馈机制，并提供了友好的用户体验提示。 --- #### 统一封装方法 最后一步是对常用的 HTTP 方法进行统一封装，方便开发者快速调用而不需要每次都传递相同的配置项。 ```typescript export default class HttpRequest { public static get<T>(url: string, params?: object): Promise<T> { return service.get(url, { params }); } public static post<T>(url: string, data?: object): Promise<T> { return service.post(url, data); } public static put<T>(url: string, data?: object): Promise<T> { return service.put(url, data); } public static delete<T>(url: string, params?: object): Promise<T> { return service.delete(url, { params }); } } ``` 以上代码片段提供了一组简洁易懂的方法签名供外部调用者使用[^1]。 --- ### 使用封装后的 Axios 发送请求 完成上述步骤之后，就可以像下面这样轻松地执行网络请求了： ```javascript import HttpRequest from './HttpRequest'; HttpRequest.get('/users') .then((data) => { console.log(data); // 输出获取到的结果集 }) .catch((err) => { console.error(err); // 处理潜在发生的错误情形 }); ``` 这种方式不仅提高了代码可读性，还减少了冗余逻辑的存在几率。 --- ### 总结 通过对 Axios 的二次封装，能够显著提升项目的灵活性与扩展能力。合理运用请求/响应拦截器可以帮助我们更好地应对跨域资源共享(CORS)，安全性加固等问题；同时也能让团队成员之间的协作更加顺畅高效。 ---