网站开发技术实验总结视频转链接在线生成

网站开发技术实验总结,视频转链接在线生成,营销方案范文,网页制作素材网站推荐以下是一套企业级 Axios 封装方案#xff0c;包含请求 / 响应拦截、统一错误处理、请求取消、环境区分、请求重试等核心功能#xff0c;可直接集成到 Vue/React/ 纯前端项目中#xff1a;一、封装目录结构src/ ├── utils/ │ ├── request.js # Axios 核心封装…以下是一套企业级 Axios 封装方案包含请求 / 响应拦截、统一错误处理、请求取消、环境区分、请求重试等核心功能可直接集成到 Vue/React/ 纯前端项目中一、封装目录结构src/ ├── utils/ │ ├── request.js # Axios 核心封装 │ └── cancelToken.js # 请求取消工具可选 ├── config/ │ └── env.js # 环境配置区分开发/测试/生产 └── api/ # 接口管理按业务拆分 ├── user.js # 用户相关接口 └── order.js # 订单相关接口二、第一步环境配置config/env.js区分不同环境的接口基础地址避免硬编码// 环境判断基于 Vite/Webpack 环境变量 const env import.meta.env.MODE || development; // 环境配置 const envConfig { development: { baseURL: http://10.230.2.24:8083, // 开发环境 }, test: { baseURL: http://1.95.205.197:8083, // 测试环境 }, production: { baseURL: https://magicpower.sh-liangxin.com/cloud-api, // 生产环境 }, }; export default { env, ...envConfig[env], };三、第二步Axios 核心封装utils/request.jsimport axios from axios; import envConfig from /config/env; import { ElMessage, ElMessageBox } from element-plus; // 按需替换为你的UI库 import { getToken, clearToken, redirectLogin } from /utils/auth; // 自定义token工具 // 创建Axios实例 const service axios.create({ baseURL: envConfig.baseURL, // 基础地址 timeout: 10000, // 超时时间10秒 headers: { Content-Type: application/json;charsetutf-8, }, }); // 请求拦截器 service.interceptors.request.use( (config) { // 1. 添加token登录态 const token getToken(); // 从localStorage/cookie获取token if (token) { config.headers.Authorization Bearer ${token}; } // 2. GET请求参数序列化可选 if (config.method get config.params) { // 解决GET请求参数中数组/对象的序列化问题 config.paramsSerializer { serialize: (params) { return new URLSearchParams(params).toString(); }, }; } // 3. 自定义请求头如接口版本号 config.headers[X-API-Version] v1; return config; }, (error) { // 请求前的错误如参数错误 console.error(请求拦截器错误, error); return Promise.reject(error); } ); // 响应拦截器 service.interceptors.response.use( (response) { const res response.data; // 1. 接口自定义状态码处理根据后端约定调整 const code res.code || res.status; // 成功状态码示例200/0表示成功 if (code 200 || code 0) { return res; } // 2. 业务错误处理如参数错误、权限不足 ElMessage.error(res.msg || 接口请求失败); return Promise.reject(res); }, (error) { // 网络/HTTP错误处理 const { response, message } error; // 1. 取消请求的错误不提示 if (axios.isCancel(error)) { console.log(请求已取消, message); return Promise.reject(error); } // 2. 超时错误 if (message.includes(timeout)) { ElMessage.error(请求超时请稍后重试); return Promise.reject(error); } // 3. 无响应网络错误 if (!response) { ElMessage.error(网络异常请检查网络连接); return Promise.reject(error); } // 4. HTTP状态码处理 const status response.status; switch (status) { case 401: // 未授权/Token过期 ElMessageBox.confirm( 登录状态已过期请重新登录, 提示, { confirmButtonText: 重新登录, cancelButtonText: 取消, type: warning, } ).then(() { clearToken(); // 清除token redirectLogin(); // 跳登录页 }); break; case 403: // 权限拒绝 ElMessage.error(暂无权限访问该资源); break; case 404: // 接口不存在 ElMessage.error(请求地址不存在); break; case 500: // 服务器错误 ElMessage.error(服务器内部错误请稍后重试); break; default: ElMessage.error(请求失败${status} - ${response.data?.msg || 未知错误}); } return Promise.reject(error); } ); // 请求重试可选 // 适用于网络抖动导致的偶发失败需安装 axios-retry // import axiosRetry from axios-retry; // axiosRetry(service, { // retries: 3, // 重试次数 // retryDelay: (retryCount) { // return retryCount * 1000; // 每次重试间隔1秒 // }, // retryCondition: (error) { // // 仅对5xx错误/网络错误重试 // return error.response?.status 500 || !error.response; // }, // }); // 导出核心方法 // 封装常用请求方法简化调用 const request { get: (url, params {}, config {}) { return service.get(url, { params, ...config }); }, post: (url, data {}, config {}) { return service.post(url, data, config); }, put: (url, data {}, config {}) { return service.put(url, data, config); }, delete: (url, params {}, config {}) { return service.delete(url, { params, ...config }); }, // 上传文件FormData upload: (url, formData, config {}) { return service.post(url, formData, { headers: { Content-Type: multipart/form-data }, ...config, }); }, }; // 导出Axios实例用于特殊场景和封装方法 export default request; export { service };四、第三步请求取消工具utils/cancelToken.js用于防抖场景如搜索框、快速点击避免重复请求import axios from axios; // 存储取消请求的函数 const cancelRequestMap new Map(); /** * 取消重复请求 * param {string} url - 请求地址 * param {string} msg - 取消提示 */ export const cancelRepeatRequest (url, msg 重复请求已取消) { if (cancelRequestMap.has(url)) { const cancel cancelRequestMap.get(url); cancel(msg); cancelRequestMap.delete(url); } }; /** * 获取取消令牌配置 * param {string} url - 请求地址 * returns {object} 取消令牌配置 */ export const getCancelTokenConfig (url) { // 先取消已存在的请求 cancelRepeatRequest(url); return { cancelToken: new axios.CancelToken((cancel) { cancelRequestMap.set(url, cancel); }), }; }; /** * 清空所有取消请求 */ export const clearAllCancelRequest () { for (const cancel of cancelRequestMap.values()) { cancel(页面销毁取消所有请求); } cancelRequestMap.clear(); };五、第四步接口管理api/user.js按业务模块拆分接口统一管理便于维护import request from /utils/request; import { getCancelTokenConfig } from /utils/cancelToken; // 用户登录 export const login (data) { return request.post(/user/login, data); }; // 获取用户信息 export const getUserInfo () { return request.get(/user/info); }; // 搜索用户带取消请求防抖 export const searchUser (keyword) { const url /user/search; return request.get(url, { keyword }, getCancelTokenConfig(url)); }; // 上传用户头像 export const uploadAvatar (formData) { return request.upload(/user/avatar, formData); }; // 修改用户信息 export const updateUser (id, data) { return request.put(/user/${id}, data); }; // 删除用户 export const deleteUser (id) { return request.delete(/user, { id }); };六、使用示例Vue 组件中script setup langts import { ref, onUnmounted } from vue; import { login, searchUser } from /api/user; import { clearAllCancelRequest } from /utils/cancelToken; const loading ref(false); // 登录示例 const handleLogin async () { loading.value true; try { const res await login({ username: admin, password: 123456, }); console.log(登录成功, res); // 存储token、跳首页等逻辑 } catch (err) { console.error(登录失败, err); } finally { loading.value false; } }; // 搜索用户防抖 const handleSearch async (keyword) { try { const res await searchUser(keyword); console.log(搜索结果, res); } catch (err) { if (!axios.isCancel(err)) { console.error(搜索失败, err); } } }; // 页面销毁时清空所有取消请求 onUnmounted(() { clearAllCancelRequest(); }); /script template el-button clickhandleLogin :loadingloading登录/el-button el-input placeholder输入用户名搜索 inputhandleSearch clearable / /template七、核心特性说明特性说明环境区分自动适配开发 / 测试 / 生产环境的接口地址无需手动修改请求拦截统一添加 token、自定义请求头处理 GET 参数序列化响应拦截统一处理业务状态码、HTTP 状态码全局错误提示错误分类处理区分取消请求、超时、网络错误、401/403/500 等场景针对性提示请求取消解决重复请求问题如搜索框防抖、快速点击方法封装简化 get/post/put/delete/upload 调用参数更清晰可扩展支持请求重试、FormData 上传、自定义配置等高级功能八、适配调整建议UI 库替换若不用 Element Plus将ElMessage/ElMessageBox替换为你的 UI 库如 Ant Design Vue 的message/modal状态码调整根据后端实际约定的成功 / 失败状态码修改响应拦截器中的code判断逻辑Token 存储getToken/clearToken需实现自己的 token 存储逻辑如 localStorage/cookie请求重试如需开启安装axios-retry并取消注释对应代码TypeScript 适配可给 request 方法添加 TS 类型定义提升类型提示。这套封装兼顾了易用性和健壮性符合企业级项目的开发规范可直接复用或根据业务需求微调。