Axios 二次封装

在前端开发中，axios 是一个非常流行的用于欣赏器和 Node.js 的 HTTP 客户端，它支持 Promise API，使得异步哀求变得更加简单和直观。然而，在实际项目中，直接利用原始的 axios 大概无法满足全部需求，比如同一处理错误、设置基础路径、添加哀求头等。这时，我们就必要对 axios 举行二次封装，以提高代码的可维护性和复用性。以下是一个基于 TypeScript 的 axios 二次封装示例及其剖析。
一、引入与创建实例

起首，从 axios 模块导入基础功能，并利用 create 方法创建一个新的 axios 实例。如许做的长处是可以针对这个实例单独配置基础路径、超时时间等，而不影响全局的 axios 设置。

1. import axios from "axios";
3. const request = axios.create({
4.   baseURL: import.meta.env.VITE_BASE_URL_API, // 动态获取环境变量中的基础URL
5.   timeout: 5000, // 设置请求超时时间为5秒
6. });

复制代码

 这里利用了情况变量 VITE_BASE_URL_API 来动态配置基础URL，这是 Vite 构建工具保举的做法，可以方便地根据不同情况（如开发、生产）切换API地点。
二、哀求拦截器

哀求拦截器紧张用于在哀求发送前做同一处理，比方自动添加认证信息到哀求头、处理一些共通的数据格式化等。 

1. request.interceptors.request.use((config) => {
2.   // 从本地存储中获取token并添加到请求头
3.   config.headers.token = localStorage.getItem("token") || "";
4.   // 注意：如果使用Bearer Token认证，应使用Authorization字段
5.   // config.headers.Authorization = localStorage.getItem('token') || '';
7.   return config; // 返回修改后的配置
8. });

复制代码

这段代码会在每次哀求前执行，确保携带用户的认证信息（如JWT token），以便服务器端举行权限验证。
三、响应拦截器

响应拦截器用于处理服务器返回的数据，可以在这里同一处理错误信息、数据解构等。

1. request.interceptors.response.use(
2.   (response) => {
3.     // 直接返回响应体中的数据，简化使用
4.     return response.data;
5.   },
6.   (error) => {
7.     // 错误处理逻辑
8.     let errorMsg = "";
9.     if (error.response) {
10.       const status = error.response.status;
11.       switch (status) {
12.         case 401:
13.           errorMsg = "Token过期";
14.           break;
15.         case 403:
16.           errorMsg = "无权访问";
17.           break;
18.         case 404:
19.           errorMsg = "请求地址错误";
20.           break;
21.         case 500:
22.           errorMsg = "服务器错误";
23.           break;
24.         default:
25.           errorMsg = "网络连接错误";
26.           break;
27.       }
28.       ElMessage({ type: "error", message: errorMsg }); // 使用Element Plus的提示组件展示错误信息
29.     }
30.     return Promise.reject(error); // 重新抛出错误，以便外部可以继续捕获
31.   }
32. );

复制代码

通过响应拦截器，我们可以或许优雅地处理各种HTTP状态码对应的错误情况，提供友好的错误提示给用户。
四、导出封装后的实例

最后，将封装好的 axios 实例导出，供项目其他部门利用。

1. export default request;

复制代码

通过如许的二次封装，我们的HTTP哀求变得更加会合和易于管理。每个哀求都会自动应用基础配置、自动携带认证信息、同一处理错误，大大提升了开发效率和代码质量。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。