EulerCopilot witChainD Web API集成：Axios封装与请求拦截器实现

EulerCopilot witChainD Web API集成Axios封装与请求拦截器实现【免费下载链接】euler-copilot-witchaind-webThe web frontend of EulerCopilot witChainD.项目地址: https://gitcode.com/openeuler/euler-copilot-witchaind-web前往项目官网免费下载https://ar.openeuler.org/ar/EulerCopilot witChainD Web是openEuler社区推出的智能协作平台前端项目其核心功能依赖于高效可靠的API通信层。本文将深入解析项目中基于Axios的请求封装设计展示如何通过拦截器实现认证统一处理、动态超时控制和错误友好提示帮助开发者快速掌握企业级前端API集成的最佳实践。核心Axios实例设计打造专用请求客户端在现代前端架构中统一的API请求层是保障系统稳定性的关键。EulerCopilot witChainD Web项目采用双实例设计模式分别处理常规数据交互和文件上传场景确保不同业务需求获得最佳配置支持。基础请求实例构建常规API请求在src/utils/request.ts中实现通过Axios.create()方法创建具有默认配置的请求实例const service axios.create({ baseURL: /witchaind/api, timeout: 90000, withCredentials: true, headers: { Access-control-allow-origin: *, }, paramsSerializer: (params) { return qs.stringify(params); }, });这个配置体现了三个关键设计原则基础路径统一管理所有请求自动附加/witchaind/api前缀避免硬编码超时策略90秒默认超时设置平衡用户体验与资源效率参数序列化使用qs库处理复杂参数确保后端正确解析文件上传专用实例针对大文件传输场景项目在src/utils/uploadRequest.ts中创建了专用上传实例具备更灵活的超时控制const uploadService axios.create({ baseURL: /witchaind/api, timeout: 10 * 60 * 1000, // 默认10分钟基础超时 withCredentials: true, headers: { Access-control-allow-origin: *, }, });图EulerCopilot witChainD Web的双Axios实例架构示意图请求拦截器统一认证与请求增强请求拦截器是实现横切关注点的理想位置项目通过它集中处理认证信息、请求头等通用逻辑大幅减少代码冗余。认证令牌自动附加在src/utils/request.ts的请求拦截器中实现了令牌优先级管理机制service.interceptors.request.use( (config: InternalAxiosRequestConfig) { // 优先使用 ECSESSION如果没有则使用 TOKEN_KEY const ecsessionToken localStorage.getItem(ECSESSION); const accessToken localStorage.getItem(TOKEN_KEY); if (ecsessionToken) { config.headers[Authorization] Bearer ${ecsessionToken}; } else if (accessToken) { config.headers[Authorization] accessToken; } return config; }, (error: any) { return Promise.reject(error); } );这种设计确保了系统在不同认证场景下的兼容性同时避免了在每个API调用中重复编写令牌附加逻辑。上传请求的动态认证处理上传拦截器采用了函数封装的方式获取认证头使逻辑更加清晰可维护// 获取有效的认证头 const getAuthHeader (): string | null { const ecsessionToken localStorage.getItem(ECSESSION); const accessToken localStorage.getItem(TOKEN_KEY); if (ecsessionToken) { return Bearer ${ecsessionToken}; } else if (accessToken) { return accessToken.startsWith(Bearer ) ? accessToken : Bearer ${accessToken}; } return null; };响应拦截器错误处理与数据转换响应拦截器负责统一处理API返回结果包括成功数据提取、错误分类处理和用户友好提示是提升前端健壮性的重要环节。标准响应处理流程在src/utils/request.ts中响应拦截器实现了标准化的数据提取逻辑service.interceptors.response.use( (response: AxiosResponse) { // 二进制类型响应直接返回 if (response.config.responseType blob || response.config.responseType arraybuffer) { return response; } const { code, result, message } response?.data; if (code?.toString() ResultEnum.SUCCESS) { return result; // 直接返回业务数据简化上层调用 } // 错误提示 ElMessage({ showClose: true, message: message || i18n.global.t(pageTipText.systemError), icon: IconError, customClass: o-message--error, duration: 3000, }); return Promise.reject(new Error(message || Error)); }, // 错误处理逻辑... );这种设计让API调用者可以直接获取业务数据无需关心状态码判断等重复工作。精细化错误分类处理项目对不同类型的错误进行了差异化处理以提供更精准的用户反馈// 响应拦截器错误处理部分 (error: any) { if (error?.response?.data) { const { retcode, message } error.response.data; if (retcode?.toString() ResultEnum.TOKEN_INVALID) { // 令牌失效处理 ElNotification({ title: i18n.global.t(dialogTipText.tipsText), message: i18n.global.t(login.message.loginToken), type: info, }); } else { // 其他业务错误 ElMessage({ showClose: true, message: message || error?.message, icon: IconError, customClass: o-message--error, duration: 3000, }); } } else if (error.code ECONNABORTED || error.message.includes(timeout)) { // 超时错误特殊处理 ElMessage({ showClose: true, message: i18n.global.t(uploadTipText.uploadTimeout, 文件上传超时请检查网络连接或尝试分批上传), icon: IconError, customClass: o-message--error, duration: 5000, }); } // ...其他错误处理 }图EulerCopilot witChainD Web的响应拦截器错误处理流程高级特性动态超时与批量上传优化文件上传场景需要特殊处理项目实现了基于文件大小和数量的动态超时计算以及批量上传支持显著提升了大文件传输的可靠性。智能超时计算函数src/utils/uploadRequest.ts中的calculateTimeout函数实现了根据文件大小动态调整超时时间的逻辑const calculateTimeout (fileSize: number, fileCount: number 1): number { // 基础超时时间2分钟 const baseTimeout 2 * 60 * 1000; // 根据文件大小计算额外时间假设最慢网速 100KB/s const sizeBasedTimeout (fileSize / (100 * 1024)) * 1000; // 批量上传的额外时间 const batchTimeout fileCount 1 ? fileCount * 30 * 1000 : 0; // 最小5分钟最大30分钟 const calculatedTimeout Math.min( Math.max(baseTimeout sizeBasedTimeout batchTimeout, 5 * 60 * 1000), 30 * 60 * 1000 ); return calculatedTimeout; };这种智能计算确保了小文件快速响应大文件有足够时间完成传输同时避免了无限等待的情况。动态上传请求创建器通过createUploadRequest函数可以为每个上传任务创建独立的Axios实例确保超时设置互不干扰const createUploadRequest (fileSize?: number, fileCount?: number) { const timeout calculateTimeout(fileSize || 0, fileCount || 1); // 创建新的 axios 实例并复制所有配置和拦截器 const dynamicUploadService axios.create({ ...uploadService.defaults, timeout, }); // 复制拦截器... return dynamicUploadService; };实际应用API调用示例项目中的API调用统一使用封装后的Axios实例以src/api/auth.ts中的认证相关接口为例import request from /utils/request; // 用户登录 export function login(data: any) { return request({ url: /auth/login, method: post, data, }); } // 获取当前用户信息 export function getCurrentUser() { return request({ url: /auth/currentUser, method: get, }); }这种调用方式简洁明了同时获得了统一的认证处理、错误提示等基础设施支持。总结与最佳实践EulerCopilot witChainD Web项目的Axios封装实现了以下关键设计目标关注点分离通过拦截器将认证、错误处理等横切关注点与业务逻辑分离场景化配置为常规请求和文件上传创建专用实例优化不同场景的性能用户体验优化精细化的错误分类和提示提升用户体验可扩展性设计动态超时、批量上传等高级特性支持业务增长建议开发者在使用过程中所有API调用通过src/api目录下的封装函数进行避免直接使用Axios实例文件上传场景使用createUploadRequest创建专用实例确保超时设置合理新增API时遵循现有接口设计规范保持代码风格一致通过这套完善的API通信层设计EulerCopilot witChainD Web为前端应用提供了坚实可靠的数据交互基础同时保持了代码的可维护性和扩展性。要开始使用EulerCopilot witChainD Web项目请先克隆仓库git clone https://gitcode.com/openeuler/euler-copilot-witchaind-web详细的API文档和使用示例可在项目源代码中进一步探索特别是src/api目录下的各接口定义文件。【免费下载链接】euler-copilot-witchaind-webThe web frontend of EulerCopilot witChainD.项目地址: https://gitcode.com/openeuler/euler-copilot-witchaind-web创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考