Fetch API 是现代 JavaScript 发起网络请求的标准方式，比 XMLHttpRequest 更简洁、强大且契合 Promise/async-await；它默认不 reject HTTP 错误状态，需手动检查 response.ok 或 status，并支持配置 method、headers、body 等选项，但不原生支持超时和上传进度。
Fetch API 是现代 JavaScript 中发起网络请求的标准方式，比传统 AJAX（基于 XMLHttpRequest）更简洁、更强大，也更符合 Promise 和 async/await 的编程习惯。
Fetch 基本用法：发个 GET 请求
最简单的用法就是调用 fetch(url)，它返回一个 Promise：
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('请求失败:', error));
注意：fetch 只在**网络错误（如断网、DNS 失败）时 reject**；HTTP 错误状态（如 404、500）仍会 resolve，需要手动检查 response.ok 或 response.status：
-
response.ok是布尔值，true表示状态码在 200–299 范围内 -
response.status返回具体状态码，比如 404、500 -
response.headers可读取响应头，response.url是最终实际请求的 URL（含重定向后地址）
带配置的 POST 请求：传 JSON 数据
发送带参数的请求，需传入第二个参数——配置对象：
立即学习“Java免费学习笔记（深入）”；
fetch('https://api.example.com/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ username: 'alice', password: '123' })
})
.then(res => {
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.json();
})
.then(data => console.log(data))
.catch(err => console.error(err));
-
method默认是GET，常用值还有POST、PUT、DELETE -
headers必须显式设置Content-Type，尤其是传 JSON 时 -
body只接受字符串、FormData、Blob、URLSearchParams 等可读流类型，不能直接传对象
Fetch 比传统 AJAX 好在哪？
不是“更好用”，而是“更现代、更一致、更易维护”：
-
原生 Promise 支持：不用手动封装回调，天然适配
async/await，代码扁平不嵌套 -
分离关注点更清晰：Request 和 Response 是独立对象，各自有方法（如
response.clone()、request.redirect），逻辑更解耦 -
默认不带 Cookie：安全性更高；如需携带 Cookie，加
credentials: 'include'即可 -
内置流式读取支持：可用
response.body.getReader()处理大文件或实时数据流（如 SSE、下载进度） -
无 IE 兼容包袱：设计之初就面向现代浏览器（Edge 18+、Chrome 42+、Firefox 39+），避免了
XMLHttpRequest的历史缺陷（如上传事件绑定麻烦、超时控制别扭）
要注意的坑
Fetch 不是万能的，有些场景仍需小心处理：
- 不支持请求超时（需用
AbortController手动中断） - 没有内置的 progress 事件（上传进度需配合
XMLHttpRequest或使用第三方库） - 无法取消已发出的请求（但
AbortController可中止未完成的 fetch） - IE 完全不支持，需引入 polyfill（如
whatwg-fetch）
简单超时控制示例：
const controller = new AbortController();
setTimeout(() => controller.abort(), 5000);
fetch('/api/data', { signal: controller.signal })
.then(r => r.json())
.catch(err => {
if (err.name === 'AbortError') console.log('请求超时');
else console.error(err);
});
不复杂但容易忽略。用熟了 Fetch，你会发现以前写一堆 XMLHttpRequest 的模板代码，现在几行就能搞定，而且更可靠、更易读。
