es6 fetch

对比XHR

🛠️ fetch 所有配置项

fetch(url, {// ========== 核心配置 ==========method: 'GET',           // HTTP 方法: GET, POST, PUT, DELETE, PATCH, HEAD, OPTIONSheaders: {               // 请求头（支持 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-originintegrity: 'sha256-abc123', // 子资源完整性校验（SRI），用于验证资源是否被篡改// 格式: '哈希算法-哈希值'（如 sha256-xxxx）// ========== 高级控制 ==========keepalive: false,       // 是否允许请求在页面卸载后继续发送（用于埋点/日志）signal: null,           // 绑定 AbortSignal 对象以取消请求（结合 AbortController）priority: 'auto',       // 请求优先级（实验性），可选值: high, low, autowindow: null            // 必须设为 null（保留字段，用于未来扩展）
});

Content-Type

告知接收方（如服务器或浏览器）​传输的数据是什么类型，例如：JSON、HTML、表单、图片等。

。。。

---

⚠️ 使用fetch 注意事项

1. ​HTTP 错误不会触发 catch
   问题：fetch 仅在网络故障（如无法连接）时 reject，但 HTTP 错误（如 404、500）会正常返回响应。

2. 默认不携带 Cookie
   ​问题：跨域请求默认不发送 Cookie，可能导致身份验证失败。
   ​解决：设置 credentials: ‘include’：

3. 请求体需要手动序列化
   ​问题：发送 JSON 数据时需手动调用 JSON.stringify()，而 axios 等库会自动处理。

4. 响应体只能读取一次
   ​问题：调用 response.json() 或 response.text() 后，响应体会被标记为已使用，再次读取会报错。
   ​解决：使用 response.clone() 克隆响应

⚠️ 缺陷

1. ​不支持同步请求
   ​问题：fetch 只有异步模式，无法像 XMLHttpRequest 一样执行同步操作。
   ​解决：使用 async/await 模拟同步逻辑

async function fetchData() {const response = await fetch(url);const data = await response.json();return data;
}

2. ​取消请求依赖 AbortController
   ​问题：取消请求需要额外引入 AbortController，不如 XMLHttpRequest.abort() 直接。
   ​解决：

const controller = new AbortController();
fetch(url, { signal: controller.signal });
controller.abort(); // 取消请求

3. ​缺乏上传/下载进度监控
   ​问题：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`);
}