vue 3 中用 axios 拦截器打印网络日志是最轻量统一的调试方式：请求拦截器记录 url、method、params 等；响应拦截器区分成功/失败并结构化输出；仅开发环境启用，配合 console.group、emoji、格式化等提升可读性。
在 Vue 3 项目中，用 Axios 拦截器打印网络日志是最轻量、最统一的前端调试方式——不用每个接口都写 console.log，改一处，全局生效。
请求拦截器：记录发了什么
在请求发出前，把完整配置（URL、method、params、headers、data 等）打到控制台，方便确认参数是否拼错、token 是否携带、请求体格式是否正确。
- 在
src/axios.js或main.ts中配置：
axiosInstance.interceptors.request.use(config => {
console.groupCollapsed(`➡️ ${config.method?.toUpperCase()} ${config.url}`);
console.log('Headers:', config.headers);
console.log('Params:', config.params);
console.log('Data:', config.data);
console.groupEnd();
return config;
}, error => {
console.error('❌ 请求配置错误:', error);
return Promise.reject(error);
});
响应拦截器：看清返回了什么
响应拦截器能捕获成功响应和各类失败场景（4xx/5xx、网络中断、超时），比只在 .catch() 里打印更全面。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 区分成功与失败，结构化输出：
axiosInstance.interceptors.response.use(response => {
console.group(`✅ ${response.config.method?.toUpperCase()} ${response.config.url} → ${response.status}`);
console.log('Response Data:', response.data);
console.log('Response Headers:', response.headers);
console.groupEnd();
return response;
}, error => {
const { config, response, request } = error;
console.group(`⚠️ ${config?.method?.toUpperCase()} ${config?.url} → FAILED`);
if (response) {
console.log('Status:', response.status);
console.log('Data:', response.data);
} else if (request) {
console.log('No response received (network issue or timeout)');
} else {
console.log('Request setup error:', error.message);
}
console.groupEnd();
return Promise.reject(error);
});
开发环境开关：避免上线污染
日志只在开发阶段需要。建议用 import.meta.env.DEV 控制是否启用打印逻辑，防止生产环境输出冗余信息或泄露敏感数据。
- 示例写法（加在拦截器内部）：
if (import.meta.env.DEV) {
console.groupCollapsed(...);
// 打印逻辑
console.groupEnd();
}
进阶提示：让日志更易读
单纯 console.log 容易淹没在大量输出中。可配合以下技巧提升效率：
- 用
console.group/console.groupCollapsed折叠请求块，点击展开查看细节 - 给每条日志加 emoji 或颜色标识（如 ⬅️ 请求 / ✅ 响应 / ⚠️ 错误），一眼识别类型
- 在 URL 后追加时间戳或唯一 ID（如
${config.url} [${Date.now()}]），便于关联请求-响应对 - 对大对象使用
JSON.stringify(data, null, 2)格式化后再打印，避免控制台折叠深层结构
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
