Fetch API 是现代浏览器原生网络请求接口，基于 Promise 设计，支持 async/await，但默认不带 Cookie、不自动处理 4xx/5xx 状态码；需手动检查 res.ok、显式配置 credentials、用 AbortController 取消请求。
Fetch API 是现代浏览器提供的原生网络请求接口，用 Promise 封装 HTTP 请求，语法更简洁、逻辑更清晰；它不是 XMLHttpRequest（XHR）的简单包装，而是一套全新设计的底层协议抽象，天然支持 async/await，但默认不带 Cookie、不自动处理 4xx/5xx 状态码，这点和传统 Ajax 有关键区别。
基本用法：从 GET 到 POST 很直接
发起一个 GET 请求只需一行核心代码：
fetch('/api/users')
.then(res => res.json())
.then(data => console.log(data));
POST 请求需显式配置 method、headers 和 body：
fetch('/api/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username: 'alice', password: '123' }) .then(res => res.json())
.then(data => console.log(data));
- 响应体（res.body）是 ReadableStream，必须调用
res.json()、res.text()或res.blob()才能读取内容 - fetch 返回的 Promise 只在网络错误（如断网、DNS 失败）时 reject，HTTP 状态码 404、500 不会触发 catch
- 如需根据状态码判断失败，要手动检查
res.ok（即 status 在 200–299）
Cookie 和认证行为默认不同
传统 XHR 默认发送当前域 Cookie（withCredentials=false），而 fetch 默认完全忽略 Cookie：
立即学习“Java免费学习笔记（深入）”；
- 要携带 Cookie，必须显式传入
{ credentials: 'include' } - 若只在同域下需要 Cookie，用
'same-origin'更安全 - 跨域请求带 Cookie 时，服务端响应头必须包含
Access-Control-Allow-Credentials: true，且不能设Access-Control-Allow-Origin: *
取消请求：Fetch 本身不支持，需靠 AbortController
XMLHttpRequest 可直接调用 xhr.abort()，而 fetch 没有内置 abort 方法：
- 借助
AbortController实现超时或手动取消：
const controller = new AbortController();
setTimeout(() => controller.abort(), 5000);
fetch('/api/data', { signal: controller.signal })
.catch(err => {
if (err.name === 'AbortError') console.log('请求被取消');
});
- React/Vue 等框架中，通常在组件卸载时调用
controller.abort()防止内存泄漏 - 注意：已 resolve 的 Promise 不会因 abort 而 reject，仅未完成的请求会被中断
错误处理逻辑更“诚实”，但也更需手动干预
fetch 的 Promise 不因 HTTP 错误状态码 reject，这是与 jQuery.ajax 或封装过的 Axios 最明显的体验差异：
- 401、404、500 响应仍走
.then()，需主动判断!res.ok - 常见写法是封装一层工具函数：
async function api(url, options = {}) {
const res = await fetch(url, options);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.json();
}
- 网络异常（如离线）才会进
catch，所以建议同时监听res.ok和网络级错误
