ToB企服应用市场:ToB评测及商务社交产业平台

标题: Axios 二次封装 [打印本页]

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

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

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

复制代码

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

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

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

复制代码

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

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

request.interceptors.response.use(
(response) => {
// 直接返回响应体中的数据，简化使用
return response.data;
},
(error) => {
// 错误处理逻辑
let errorMsg = "";
if (error.response) {
const status = error.response.status;
switch (status) {
case 401:
errorMsg = "Token过期";
break;
case 403:
errorMsg = "无权访问";
break;
case 404:
errorMsg = "请求地址错误";
break;
case 500:
errorMsg = "服务器错误";
break;
default:
errorMsg = "网络连接错误";
break;
}
ElMessage({ type: "error", message: errorMsg }); // 使用Element Plus的提示组件展示错误信息
}
return Promise.reject(error); // 重新抛出错误，以便外部可以继续捕获
}
);

复制代码

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

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

export default request;

复制代码

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

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

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)