对比XHR
🛠️ fetch 所有配置项
fetch(url, {
// ========== 核心配置 ==========
method: 'GET', // HTTP 方法: GET, POST, PUT, DELETE, PATCH, HEAD, OPTIONS
headers: { // 请求头（支持 Headers 对象或普通对象）
'Content-Type': 'application/json', // 常用 Content-Type 值:
// - application/x-www-form-urlencoded 默认表单提交（键值对）
// - application/json JSON 数据
// - application/octet-stream 任意二进制数据（如文件下载）
// - multipart/form-data 表单文件上传（支持二进制）
// - text/plain 纯文本（无格式）
'Authorization': 'Bearer token', // 身份验证
'Accept': 'application/json', // 指定响应格式
'X-Custom-Header': 'value' // 自定义头
},
body: null, // 请求体数据，支持以下类型:
// - String（JSON 字符串）
// - FormData（表单/文件上传）
// - URLSearchParams（查询参数，自动设置 Content-Type）
// - Blob/BufferSource（二进制数据）
// - ReadableStream（流式数据，实验性）
// ========== 网络策略配置 ==========
mode: 'cors', // 请求模式，可选值:
// - cors: 允许跨域（需服务器返回 CORS 头）
// - no-cors: 禁止跨域（响应不可读，仅用于简单请求）
// - same-origin: 仅同源请求
credentials: 'same-origin', // Cookie 策略，可选值:
// - omit: 不发送 Cookie（默认）
// - same-origin: 同源时发送
// - include: 跨域也发送（需服务器允许 credentials）
cache: 'default', // 缓存策略，可选值:
// - default: 遵循浏览器缓存
// - no-store: 禁用缓存
// - reload: 强制绕过缓存
// - no-cache: 使用缓存但重新验证
// - force-cache: 优先使用过期缓存
redirect: 'follow', // 重定向处理，可选值:
// - follow: 自动重定向（默认）
// - error: 重定向时报错
// - manual: 手动处理（通过 response.redirected 判断）
// ========== 来源与安全 ==========
referrer: 'about:client', // 来源页地址，可选值:
// - "about:client": 隐藏来源（默认）
// - "no-referrer": 不发送 Referer 头
// - URL: 指定来源地址
referrerPolicy: 'no-referrer-when-downgrade', // 来源策略，控制 Referer 头发送规则
// 常见值: no-referrer, origin, strict-origin
integrity: 'sha256-abc123', // 子资源完整性校验（SRI），用于验证资源是否被篡改
// 格式: '哈希算法-哈希值'（如 sha256-xxxx）
// ========== 高级控制 ==========
keepalive: false, // 是否允许请求在页面卸载后继续发送（用于埋点/日志）
signal: null, // 绑定 AbortSignal 对象以取消请求（结合 AbortController）
priority: 'auto', // 请求优先级（实验性），可选值: high, low, auto
window: null // 必须设为 null（保留字段，用于未来扩展）
});
Content-Type
告知接收方（如服务器或浏览器）传输的数据是什么类型，例如：JSON、HTML、表单、图片等。
。。。
⚠️ 使用fetch 注意事项
-
HTTP 错误不会触发 catch
问题：fetch 仅在网络故障（如无法连接）时 reject，但 HTTP 错误（如 404、500）会正常返回响应。 -
默认不携带 Cookie
问题：跨域请求默认不发送 Cookie，可能导致身份验证失败。
解决：设置 credentials: ‘include’： -
请求体需要手动序列化
问题：发送 JSON 数据时需手动调用 JSON.stringify()，而 axios 等库会自动处理。 -
响应体只能读取一次
问题：调用 response.json() 或 response.text() 后，响应体会被标记为已使用，再次读取会报错。
解决：使用 response.clone() 克隆响应
⚠️ 缺陷
- 不支持同步请求
问题：fetch 只有异步模式，无法像 XMLHttpRequest 一样执行同步操作。
解决：使用 async/await 模拟同步逻辑
async function fetchData() {
const response = await fetch(url);
const data = await response.json();
return data;
}
- 取消请求依赖 AbortController
问题：取消请求需要额外引入 AbortController，不如 XMLHttpRequest.abort() 直接。
解决：
const controller = new AbortController();
fetch(url, { signal: controller.signal });
controller.abort(); // 取消请求
- 缺乏上传/下载进度监控
问题：fetch 无法原生监控上传或下载进度，而 XMLHttpRequest 支持。
解决：通过流式处理或自定义逻辑间接实现：
const response = await fetch(url);
const reader = response.body.getReader();
let received = 0;
while (true) {
const { done, value } = await reader.read();
if (done) break;
received += value.length;
console.log(`Received ${received} bytes`);
}
