Fetch API 是现代浏览器中基于 Promise 的网络请求标准，语法简洁但需手动处理状态码、凭证、超时等；与 XMLHttpRequest 相比，它不自动解析响应、不发 Cookie、无内置超时和进度监听，需显式配置 credentials、headers 并配合 AbortController 使用。
Fetch API 是现代浏览器中发起网络请求的原生方式，语法简洁、基于 Promise，比传统 XMLHttpRequest（XHR）更易用、更符合当前 JavaScript 开发习惯。它不自动处理 Cookie、不支持超时控制、默认不带凭证，这些细节和传统 AJAX 有明显区别，需要主动配置。
基本用法：GET 请求最简示例
发起一个 GET 请求只需一行核心代码，返回 Promise：
- fetch('/api/users') 返回一个 Promise，解析响应需链式调用 .then(response => response.json())
- 注意：fetch 不会因 HTTP 状态码（如 404、500）拒绝 Promise，需手动检查 response.ok 或 response.status
- 完整写法示例：
fetch('/api/users')
.then(res => {
if (!res.ok) throw new Error(`HTTP error: ${res.status}`);
return res.json();
})
.then(data => console.log(data))
.catch(err => console.error('请求失败:', err));
POST 请求与请求配置
发送 JSON 数据需设置 headers 并将 body 序列化：
- 使用 method: 'POST'、headers 和 body: JSON.stringify(...)
- 若需携带 Cookie（如登录态），必须显式设置 credentials: 'include'（默认是 'omit'）
- 示例：
fetch('/api/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username: 'alice', password: '123' }),
credentials: 'include'
})
与传统 AJAX（XMLHttpRequest）的核心差异
Fetch 不是 XHR 的升级版，而是设计哲学不同的新标准：
立即学习“Java免费学习笔记（深入）”；
- 无内置超时机制：XHR 可设 timeout 属性；fetch 需配合 AbortController 实现中断
- 不自动解析响应体：XHR 的 responseType 和自动 JSON 解析不存在；fetch 必须手动调用 .json()、.text() 等方法
- 默认不发 Cookie：XHR 默认随请求发送 Cookie；fetch 默认隔离凭证，需显式传 credentials: 'include'
- 不支持进度监听：上传/下载进度需用 XHR 或第三方库（如 axios）实现
常见坑与应对建议
实际开发中容易忽略的关键点：
- 忘记处理非 2xx 响应 → 总加 if (!res.ok) throw ...
- 未指定 Content-Type 导致后端解析失败 → POST/PUT 时显式设置 headers
- 跨域请求被拒 → 后端需配 CORS 头（如 Access-Control-Allow-Origin），前端 fetch 不能绕过
- 想取消请求但没用 AbortController → 配合 signal 选项可中止进行中的 fetch
基本上就这些。Fetch 简洁有力，但不是“开箱即用”的万能方案；理解它和 XHR 的边界，才能用得稳、改得准。
