fetch 是现代浏览器原生 Promise-based HTTP 接口，区别于 XMLHttpRequest：不自动带 cookie、不设默认 Content-Type、非网络错误（如 404/500）不会 reject，需手动检查 response.ok。
fetch 是什么，和 XMLHttpRequest 有什么区别
fetch 是现代浏览器原生提供的 Promise-based HTTP 请求接口，替代了老式的 XMLHttpRequest。它不自动携带 cookies（除非显式设置 credentials: 'include'），默认不带请求头中的 Content-Type，也不会在 HTTP 状态码非 2xx 时自动 reject —— 这些都不是 bug，而是设计选择。
常见误解是“fetch 失败了会 throw”，其实只有网络异常（如断网、DNS 失败）才会触发 Promise reject；404、500 这类响应仍会 resolve，需手动检查 response.ok 或 response.status。
GET 请求怎么写，怎么处理 JSON 响应
最简 GET 示例：
fetch('/api/users')
.then(response => {
if (!response.ok) throw new Error(`HTTP error: ${response.status}`);
return response.json();
})
.then(data => console.log(data))
.catch(err => console.error('Fetch failed:', err));
关键点：
立即学习“Java免费学习笔记（深入）”；
-
response.json()本身也返回 Promise，必须用.then或await接收，不能直接赋值给变量 - 不要省略
response.ok判断 —— 否则 404 会静默转成空对象或解析失败 - 如果后端返回非 JSON（比如纯文本或 HTML），改用
response.text()或response.blob()
POST 请求要传 JSON 数据，headers 怎么设
发送 JSON 必须同时设置两个东西：Content-Type 请求头 + JSON.stringify() 主体：
fetch('/api/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
username: 'admin',
password: '123'
})
})
.then(r => r.json())
.catch(e => console.error(e));
容易出错的地方：
- 漏写
headers—— 导致后端收不到req.body（尤其 Express 默认不解析无Content-Type的 POST） - body 传对象字面量（如
body: { username: 'a' }）—— fetch 会把它当 FormData 处理，后端收不到字段 - 需要带 cookie 登录态？加
credentials: 'include'，否则跨域时 cookie 不发送
如何 abort 一个正在执行的 fetch 请求
fetch 本身不支持直接 .abort()，得靠 AbortController：
const controller = new AbortController();
setTimeout(() => controller.abort(), 5000);
fetch('/api/slow', { signal: controller.signal })
.catch(err => {
if (err.name === 'AbortError') {
console.log('Request timed out');
}
});
注意：
-
signal是唯一可控中断方式，没有其他兼容写法 - 已 resolve 的 Promise 不会被取消，只是终止底层连接；后续 .then 仍会执行（所以要用
err.name === 'AbortError'判断） - React/Vue 中发起请求前没清理上一个
AbortController，容易导致内存泄漏或状态错乱
response.ok、混淆 body 类型、或者在未配置 credentials 时调用登录接口。这些地方一错，错误表现往往很隐蔽。 
