JavaScript 中怎么在 Fetch API 中通过 Request 构造函数复用请求配置-js教程-PHP中文网

fetch api 中复用请求配置的核心是通过 request 构造函数结合 clone() 与新构造实现动态覆盖，或封装工厂函数统一管理 headers、credentials 等公共选项，并注意 request 实例不可变性。

javascript 中怎么在 fetch api 中通过 request 构造函数复用请求配置

在 Fetch API 中，通过 Request 构造函数复用请求配置的核心思路是：**把公共的请求选项（如 headers、method、credentials）预先封装成一个 Request 实例或配置对象，再结合不同 URL 或 body 动态生成新请求**。直接复用 Request 实例本身受限（因为 Request 是不可变的），但可以基于它派生新请求。

用 Request 实例作为模板，用 clone() + new Request() 构造新请求

Request 实例不可修改，但支持 clone() 方法复制一份，并允许在构造新 Request 时覆盖部分字段（如 url、body）。这是最贴近“复用配置”的方式：

先创建一个基础 Request 模板（含 headers、credentials 等）
调用 template.clone() 获取副本
用 new Request(url, { ...options }) 覆盖所需字段（注意：不能直接改 clone 后的实例，需传入新配置）

示例：

JavaStoryDevelop

你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在

下载

// 基础配置模板（不含具体 URL 和 body）
const baseRequest = new Request('/api/', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer token123' },
  credentials: 'include'
});

// 复用模板发请求 A
fetch(new Request('/api/users', { ...baseRequest, body: JSON.stringify({ name: 'Alice' }) }))

// 复用模板发请求 B（仅改 URL 和 body）
fetch(new Request('/api/posts', { ...baseRequest, body: JSON.stringify({ title: 'Hello' }) }))

更推荐：封装成可复用的工厂函数

比直接操作 Request 更清晰、灵活。把固定配置提取为函数参数或闭包变量，动态注入 URL 和 payload：

避免重复写 headers/credentials 等 boilerplate
便于统一处理认证 token 刷新、日志、错误格式化等逻辑
天然支持 TypeScript 类型推导和 IDE 提示

示例：

const createApiRequest = (url, options = {}) => 
  new Request(url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${localStorage.getItem('token') || ''}`
    },
    credentials: 'include',
    ...options
  });

// 使用
fetch(createApiRequest('/api/login', { body: JSON.stringify({ u: 'a', p: 'b' }) }))
fetch(createApiRequest('/api/profile', { method: 'GET', body: null }))

注意 Request 实例的不可变性与常见误区

Request 对象一旦创建，其 url、method、headers 等属性是只读的。试图直接赋值会静默失败：

req.url = '/new' 不生效（仍为原 URL）
req.headers.set('X-Trace', '1') 报错（Headers 对象不可写）
req.clone() 返回新实例，但仍是只读 —— 必须用 new Request(...) 才能真正“定制”

因此，“复用”本质是复用配置对象，而非复用实例本身的状态。

配合 AbortController 实现可取消的复用请求

若需为多个复用请求统一控制中止，可在工厂函数中注入 signal：

创建一个 AbortController 实例
所有请求都传入 signal: controller.signal
调用 controller.abort() 即可批量取消

示例：

const controller = new AbortController();

const reqA = new Request('/api/data', {
  signal: controller.signal,
  // ...其他复用配置
});
const reqB = new Request('/api/status', {
  signal: controller.signal,
  // ...相同 headers/credentials
});

// 发起请求
fetch(reqA); fetch(reqB);

// 任意时刻取消全部
// controller.abort();