如何获取Fetch请求（而非响应）的请求参数并用于日志等场景？

当然可以实现！你完全可以把传给fetch的请求配置（method、headers、body这些）先单独存入变量，再将这个变量传递给fetch——这样既能正常发起请求，又能方便地把参数复用在日志记录等场景中。

基础实现步骤 #

先把请求参数封装成独立的对象变量，再用它调用fetch：

// 1. 先定义并存储请求配置参数
const fetchRequestConfig = {
  method: method, // 替换为你的实际请求方法，比如'POST'/'GET'
  headers: new Headers({
    'Authorization': token,
    'Content-Type': 'application/json'
  }),
  body: JSON.stringify(payload) // 注意：如果payload是JS对象，需要转为JSON字符串
};

// 2. 使用存储好的配置发起Fetch请求
fetch(url, fetchRequestConfig)
  .then((response) => response.json())
  .then((responseData) => {
    console.log('响应数据:', responseData);
    // 3. 直接复用fetchRequestConfig做日志记录
    console.log('请求参数:', fetchRequestConfig);
    // 或者传递给你的自定义日志方法
    // yourLoggingMethod(fetchRequestConfig);
  })
  .catch((error) => {
    console.error('请求失败:', error);
    // 异常场景也可以记录请求参数
    // yourErrorLoggingMethod(fetchRequestConfig, error);
  });

优化：让Headers对象更易读（适合日志） #

原生Headers对象直接打印可能不够直观，你可以把它转成普通JS对象，方便日志序列化：

// 将Headers转为普通对象
const serializableHeaders = Object.fromEntries(fetchRequestConfig.headers.entries());
// 生成适合日志的请求参数对象
const loggableRequestParams = {
  ...fetchRequestConfig,
  headers: serializableHeaders
};

// 现在可以直接JSON格式化打印
console.log('可序列化的请求参数:', JSON.stringify(loggableRequestParams, null, 2));

进阶：封装全局Fetch拦截（自动记录所有请求） #

如果你的项目需要对所有fetch请求自动记录参数，可以封装一个自定义的fetch函数：

function trackedFetch(url, options = {}) {
  // 先记录请求信息
  const logData = {
    url,
    timestamp: new Date().toISOString(),
    ...options,
    headers: Object.fromEntries((options.headers || new Headers()).entries())
  };
  console.log('发起请求:', logData);
  // 调用原生fetch并返回Promise
  return fetch(url, options);
}

// 用法和原生fetch完全一致
trackedFetch(url, fetchRequestConfig)
  .then(res => res.json())
  .then(data => console.log('响应:', data));

内容的提问来源于stack exchange，提问作者Devin Dixon