Axios仅处理HTTP请求，WebSocket是独立协议，二者职责分明：Axios用于登录、表单提交等请求-响应操作，WebSocket用于消息推送、实时通知等双向通信；可共用token、baseURL等配置，但须分别封装、按需导入，并在组件卸载时显式关闭WebSocket连接。
Axios 本身不处理 WebSocket，它只负责 HTTP 请求。WebSocket 是独立的通信协议，和 Axios 没有交集——不能用 Axios 发起 WebSocket 连接，也不能用 WebSocket 发送 HTTP 请求。两者在 Vue 3 中是并行使用的不同工具，各自承担不同职责：Axios 管“一次性取数据”，WebSocket 管“持续双向通信”。关键不是“结合”，而是“分工协作”。
明确职责边界
HTTP 和 WebSocket 解决的是两类问题：
- Axios：用于登录、获取初始化数据、提交表单、上传文件等有明确请求-响应周期的操作；
- WebSocket：用于消息推送、在线状态同步、实时通知、协同编辑等需要服务端主动下推的场景。
比如用户登录成功后，先用 Axios 获取用户基本信息和权限菜单，再用 WebSocket 连接聊天服务或接收系统公告——这是典型分步使用，不是混合调用。
共用基础配置（如 baseURL / token）
虽然协议不同，但它们常共享部分上下文信息，例如认证凭据和 API 地址前缀：
立即学习“前端免费学习笔记（深入）”；
- WebSocket 连接 URL 可能需要拼接 token，如
wss://api.example.com/ws?token=xxx，这个token通常来自 Axios 登录后存入 localStorage 或 pinia 的结果； - WebSocket 的 host 和 Axios 的
baseURL往往同源（如都指向https://api.example.com），便于统一管理环境变量； - 可在封装 WebSocket 类时，从同一状态仓库（如 pinia store）读取用户登录态，避免重复取值或状态不一致。
在 Vue 3 中分别封装、按需导入
推荐将两者解耦封装，保持清晰结构：
-
Axios 封装：放在
src/utils/request.ts，导出默认实例，含拦截器、错误统一处理、类型泛型支持； -
WebSocket 封装：放在
src/utils/socket.ts，导出一个可复用的类（如WebSocketManager），支持连接、重连、事件注册、手动断开； - 组件中按需导入：需要拉数据就 import request，需要收消息就 import socketManager，互不干扰。
注意生命周期与资源释放
Vue 组件卸载时，容易忽略 WebSocket 连接未关闭的问题：
- Axios 请求天然具备“一次一清”特性，无需额外清理；
- WebSocket 是长连接，必须在
onBeforeUnmount或onScopeDispose中显式调用socket.close()，否则可能造成内存泄漏或重复监听； - 若多个组件共用同一个 WebSocket 实例（推荐做法），应在全局状态或插件层统一管理连接状态，组件只负责订阅事件，不负责开关连接。
