JavaScript 中对象解构怎么在 API 请求拦截器中提取 headers 字段-js教程-PHP中文网

javascript中对象解构不能直接提取request实例的只读headers对象，但可解构fetch配置或axios config中的普通headers对象，并支持默认值与可选链安全访问。

javascript 中对象解构怎么在 api 请求拦截器中提取 headers 字段

在 JavaScript 中，对象解构本身不能直接“提取”请求头（headers），因为 headers 是 Request 或 fetch 配置对象中的一个属性，而原生 Request 实例的 headers 是只读的 Headers 对象（不是普通对象），无法用解构语法直接展开。但你可以在 API 请求拦截器中，通过解构传入的配置对象来获取 headers 字段的初始值（即你手动设置的那些 header 键值对）。

✅ 解构 fetch 配置对象中的 headers（最常见场景）

当你封装自己的 request 函数并使用 fetch 时，通常会把 url 和 options（含 headers）作为参数传入。这时你可以对 options 进行解构：

function request(url, { method = 'GET', headers = {}, body, ...rest } = {}) {
  // ✅ 这里解构出 headers（它是一个普通对象，如 { 'Authorization': 'Bearer xxx' }）
  console.log(headers); // { 'Content-Type': 'application/json', Authorization: '...' }

  // 合并默认 headers 与传入 headers
  const finalHeaders = {
    'Content-Type': 'application/json',
    ...headers
  };

  return fetch(url, {
    method,
    headers: finalHeaders,
    body: body && JSON.stringify(body),
    ...rest
  });
}

// 调用示例
request('/api/user', {
  method: 'POST',
  headers: { Authorization: 'Bearer abc123' },
  body: { name: 'Alice' }
});

⚠️ 注意：不能解构 Request 实例的 headers 属性

new Request(url, options) 创建的实例，其 headers 是 Headers 接口对象，不支持解构：

OpenJDK 24

下载

const req = new Request('/api/data', {
  headers: { 'X-Trace': '123' }
});

// ❌ 错误：Headers 对象不是可枚举的普通对象，下面会得到空对象或报错
const { headers } = req; // headers === undefined

// ✅ 正确：用 get() 方法读取单个字段，或遍历
console.log(req.headers.get('X-Trace')); // '123'

// 若需转为普通对象再解构，可手动转换：
const headersObj = Object.fromEntries([...req.headers]);
const { 'X-Trace': traceId } = headersObj; // ✅ 现在可以解构了

? 在 Axios 拦截器中解构 headers（实际项目常用）

Axios 的请求拦截器接收的是 config 对象，它的 headers 是普通 JS 对象，可直接解构：

axios.interceptors.request.use(config => {
  // ✅ 解构 config.headers（注意：是 config.headers，不是 config.header）
  const { Authorization, 'X-User-ID': userId } = config.headers || {};

  console.log('Auth:', Authorization);
  console.log('User ID:', userId);

  // 可在此添加/修改 headers
  if (!config.headers['X-Request-Time']) {
    config.headers['X-Request-Time'] = Date.now().toString();
  }

  return config;
});