在前端开发中，网络请求是与后端数据交互的关键环节，Axios 作为一款流行的 HTTP 客户端库，为我们提供了强大且灵活的功能。其中，transformRequest/transformResponse和拦截器（interceptors）常常让人混淆，今天就带大家深入剖析它们的区别与应用场景，助你在开发中精准使用！
核心区别：一场职责分工的较量
想象一下，transformRequest/transformResponse是专注于单个任务的 “特种兵”，只对当前请求的配置进行处理；而拦截器则是掌控全局的 “指挥官”，管理着所有请求的 “生命线”。我们通过一张表格直观对比它们的差异：
| 特性 | transformRequest/transformResponse | 拦截器（Interceptors） |
|---|---|---|
| 作用阶段 | 仅针对当前请求的配置 | 全局或实例级别的所有请求 |
| 执行顺序 | 在拦截器之后执行 | 在 transform* 之前执行 |
| 修改内容 | 只能修改 data 或 headers | 可修改整个请求 / 响应配置（包括 URL、方法等） |
| 适用场景 | 单个请求的数据格式转换（如 JSON → FormData） | 全局逻辑（如统一错误处理、Token 注入） |
| 多个处理函数 | 按数组顺序执行 | 按添加顺序执行（请求拦截器：后添加先执行；响应拦截器：先添加先执行） |
深度解读：各司其职的具体表现
transformRequest/transformResponse：数据转换小能手
transformRequest和transformResponse就像是数据的 “翻译官”，它们专注于请求体（data）或响应体（data）的格式转换。
使用特点：
- 定制化处理：定义在请求配置（config）中，仅对当前请求生效，就像为特定任务配备专属翻译。
- 数据处理专家：擅长处理数据格式，比如将数据加密、序列化，或者将响应数据解密等，但无法修改其他配置（如 URL、请求方法）。
实战示例：
在实际开发中，我们可能需要将对象数据转换为FormData格式发送给后端，或者对响应数据进行解密处理。来看代码示例：
axios.post('/api', data, {
transformRequest: [
function (data, headers) {
// 将对象转为 FormData
const formData = new FormData();
Object.keys(data).forEach(key => {
formData.append(key, data[key]);
});
return formData;
}
],
transformResponse: [
function (data) {
// 解析前解密
return decrypt(data);
}
]
});
拦截器：全局把控的指挥官
拦截器就像一位经验丰富的指挥官，它能够全局拦截请求和响应，对完整配置进行修改或处理错误。
使用特点：
- 全局掌控：通过axios.interceptors添加，影响所有请求，可对请求 / 响应的任意部分进行修改，比如添加Token、设置请求头，甚至重试失败请求。
- 异步处理：支持异步操作，比如在Token过期时进行刷新，确保请求的正常发送。
实战示例：
在项目中，我们常常需要在请求头中注入Token进行身份验证，或者对响应错误进行统一处理。下面是具体的代码实现：
// 请求拦截器（注入 Token）
axios.interceptors.request.use(config => {
config.headers.Authorization = `Bearer ${token}`;
return config;
});
// 响应拦截器（统一错误处理）
axios.interceptors.response.use(
response => response,
error => {
if (error.response.status === 401) {
redirectToLogin();
}
return Promise.reject(error);
}
);
执行顺序：请求与响应的旅程路线
了解了它们的作用，再来看看在请求和响应过程中，transformRequest/transformResponse和拦截器的执行顺序：
- 请求流程：请求拦截器 → transformRequest → 实际发送请求
- 响应流程：接收响应 → transformResponse → 响应拦截器 → then/catch
选择策略：按需使用，事半功倍
在实际开发中，我们该如何选择使用transformRequest/transformResponse还是拦截器呢？记住以下原则：
- 当需要全局逻辑处理：比如统一的Token管理、错误处理，或者修改非data的配置（如 URL、超时时间），就使用拦截器，它能高效地处理所有请求。
- 当需要特定请求的数据转换：比如某个接口需要特殊的数据加密格式，或者不想污染全局拦截器逻辑，这时transformRequest/transformResponse就是最佳选择。
组合使用：发挥最大效能
很多时候，我们会将两者组合使用，实现更复杂的功能。例如，在全局拦截器中添加Token，同时针对特定请求进行数据格式转换：
// 全局拦截器：添加 Token
axios.interceptors.request.use(config => {
config.headers.Auth = 'xxx';
return config;
});
// 特定请求：转换数据格式
axios.post('/api', { id: 1 }, {
transformRequest: [
data => JSON.stringify(data), // 转为 JSON 字符串
data => encrypt(data) // 加密
],
transformResponse: [
data => decrypt(data) // 解密响应
]
});
通过合理区分transformRequest/transformResponse和拦截器的职责，我们可以更优雅、高效地组织代码，让 Axios 在项目中发挥出最大的价值。下次遇到数据转换和请求拦截的问题，相信你已经能得心应手地选择合适的方案了！如果在实际使用中有任何新的发现或疑问，欢迎在评论区交流讨论～
