请求拦截器不负责数据扁平化，因其缺乏上下文判断能力，强行处理易误伤表单、分页等字段；应于api调用层用工具函数显式处理，或通过可选预处理器（如transformdata）安全扩展。
请求拦截器本身不负责数据扁平化——它只处理请求配置（如 config.url、config.data、config.params 等），而数组扁平化是业务数据预处理环节，应在调用 API 前、传入请求参数时完成，而不是塞进拦截器里。
为什么不该在请求拦截器里做扁平化？
拦截器面向所有请求，不具备上下文判断能力。你无法知道当前请求的 data 是不是树形结构，更无法安全地对任意格式的数组递归扁平——可能误伤表单对象、分页参数或文件上传字段，导致接口报错或数据丢失。
正确做法：在 API 调用层统一处理
把扁平化逻辑封装成工具函数，在具体接口方法中显式调用，既清晰又可控：
- 定义扁平化工具函数（支持层级、父子关系标记）：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
export const flattenTree = (nodes, result = [], parentId = null, level = 1) => {<br>
nodes.forEach(node => {<br>
result.push({<br>
...node,<br>
parentId,<br>
level,<br>
children: undefined // 移除嵌套 children，确保扁平<br>
});<br>
if (Array.isArray(node.children) && node.children.length) {<br>
flattenTree(node.children, result, node.id, level + 1);<br>
}<br>
});<br>
return result;<br>
};
- 在 API 方法中使用（例如提交排序后的树结构）：
import { flattenTree } from '@/utils/tree';<br>
import { api } from '@/utils/request';<br><br>
// 提交拖拽后的新顺序（原始为嵌套树）<br>
export const updateMenuOrder = (treeData) => {<br>
const flatData = flattenTree(treeData);<br>
return api.post('/menu/sort', flatData);<br>
};
如果非要“靠近请求层”统一处理？
可在封装的请求函数中增加可选预处理器，而非硬塞进拦截器：
- 扩展
api.post()支持transformData选项：
export const post = (url, data, options = {}) => {<br>
const { transformData, ...rest } = options;<br>
const payload = transformData ? transformData(data) : data;<br>
return axiosInstance.post(url, payload, rest);<br>
};
然后调用：
post('/menu/sort', treeData, { transformData: flattenTree })补充提醒
扁平化后通常还需保留原始结构标识（如 id、parentId、sortIndex），后端才能重建顺序。别只顾扁平，漏传关键关联字段。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
