如何通过Axios请求拦截器统一添加公共请求体？

这事儿很简单，和你统一配置请求头的思路完全一致——直接在已有的请求拦截器里扩展逻辑，自动处理请求体的合并就行。下面是具体的实现步骤：

1. 定义你的公共请求体 #

先把需要全局注入的公共参数抽出来，静态或动态定义都可以：

// 示例公共请求体，可根据实际需求调整
const myCommonBody = {
  userId: 'global_user_123',
  requestSource: 'web_app',
  timestamp: Date.now()
};

2. 修改请求拦截器，自动合并公共请求体 #

在你已经创建的axiosInstance的请求拦截器里，加入处理请求体的逻辑。这里要注意区分请求方法：只有POST、PUT、PATCH这类通常携带请求体的方法才需要处理，同时要保证用户手动传入的自定义参数优先级更高，不会被公共体覆盖：

export const axiosInstance = axios.create({ baseURL: 'demo API' });

axiosInstance.interceptors.request.use(function (config) {
  // 保留你原来的请求头配置逻辑
  config.headers['Accept'] = 'application/json';
  config.headers['testkey'] = 'randomdata';

  // 处理公共请求体：针对带请求体的HTTP方法
  const methodsWithBody = ['post', 'put', 'patch'];
  if (methodsWithBody.includes(config.method?.toLowerCase())) {
    // 合并公共体和用户传入的data，用户参数优先级更高
    config.data = {
      ...myCommonBody,
      ...(config.data || {})
    };
  }

  // 额外扩展：如果需要给GET请求统一加公共查询参数，也可以用类似逻辑
  if (config.method?.toLowerCase() === 'get') {
    config.params = {
      lang: 'zh-CN',
      ...(config.params || {})
    };
  }

  return config;
}, function (err) {
  return Promise.reject(err);
});

3. 调用API时的简化写法 #

现在你再也不用手动传入myCommonBody了，直接传自定义参数（如果有的话）就行，公共部分会自动注入：

// 示例1：只传自定义业务参数
return axiosInstance.post('/api/demo', { customParam: 'hello_world' })
  .then(data => { /* 你的业务逻辑处理 */ })
  .catch(err => { throw err; });

// 示例2：无自定义参数时，甚至可以不传data
return axiosInstance.post('/api/empty-body')
  .then(data => { /* 你的业务逻辑处理 */ })
  .catch(err => { throw err; });

额外提示：动态公共参数 #

如果你的公共请求体是动态的（比如需要从本地缓存取用户token、实时用户信息等），可以把公共参数改成一个函数实时获取：

// 动态获取公共参数的函数
const getDynamicCommonBody = () => {
  const userToken = localStorage.getItem('authToken');
  const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}');
  return {
    token: userToken,
    userId: userInfo.id,
    timestamp: Date.now()
  };
};

// 在拦截器里调用这个函数，保证每次请求参数都是最新的
config.data = {
  ...getDynamicCommonBody(),
  ...(config.data || {})
};

这样就能完美实现全局自动注入公共请求体的需求啦！

内容的提问来源于stack exchange，提问作者Anupam Maurya