Fetch API 默认不校验HTTP状态码，404/500等仍会resolve，需手动检查response.ok或status；无默认超时、不自动解析JSON、不带凭据，错误处理分网络失败、HTTP异常、解析失败三层。
Fetch API 是现代 JavaScript 中发起网络请求的首选方式，它比 XMLHttpRequest 更简洁、更符合 Promise 语义，且原生支持 async/await。但直接用 fetch() 容易忽略错误处理和状态判断——它只在**网络失败**（如断网、DNS 错误）时拒绝 Promise，而 404、500 这类 HTTP 错误仍会进入 then() 分支。
fetch() 默认不校验 HTTP 状态码
这是最常踩的坑：调用 fetch('/api/user') 返回 401 响应时，Promise 依然 resolve，你得手动检查 response.ok 或 response.status。
-
response.ok是布尔值，等价于response.status >= 200 && response.status - 如果后端返回
204 No Content，response.body为空，response.json()会抛错，需先判断response.headers.get('content-type')?.includes('json') - 默认不带 Cookie，跨域请求需显式传
{ credentials: 'include' }，否则服务端收不到 session
const res = await fetch('/api/profile');
if (!res.ok) {
throw new Error(`HTTP ${res.status}: ${res.statusText}`);
}
const data = await res.json();
POST 请求要配对设置 Content-Type 和 body
发送 JSON 数据时，Content-Type 头和 body 格式必须匹配，否则后端可能解析失败或 400 报错。
- 发 JSON：设
headers: { 'Content-Type': 'application/json' }，且body: JSON.stringify({ name: 'Alice' }) - 发表单数据：用
new URLSearchParams({ name: 'Alice' })，此时不要手动设Content-Type，浏览器会自动加application/x-www-form-urlencoded - 传文件：用
FormData对象，此时也不能手动设Content-Type，否则会破坏 boundary
await fetch('/api/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ email: 'a@b.c', password: '123' })
});
如何取消 fetch 请求（AbortController）
原生 fetch() 不支持超时或手动取消，但可通过 AbortController 实现。尤其在 React 组件卸载、用户快速切换页面时，避免内存泄漏和无意义的响应处理。
本文档主要讲述的是使用JSON进行网络数据交换传输；JSON（JavaScript ObjectNotation）是一种轻量级的数据交换格式，易于阅读和编写，同时也易于机器解析和生成，非常适合于服务器与客户端的交互。JSON采用与编程语言无关的文本格式，但是也使用了类C语言的习惯，这些特性使JSON成为理想的数据交换格式。 和 XML 一样，JSON 也是基于纯文本的数据格式。由于 JSON 天生是为 JavaScript 准备的，因此，JSON的数据格式非常简单，您可以用 JSON 传输一个简单的 St
立即学习“Java免费学习笔记（深入）”；
- 创建
const controller = new AbortController()，把controller.signal传入fetch()的signal选项 - 调用
controller.abort()后，fetch()会立即 reject，错误类型是DOMException，name === 'AbortError' - 超时控制可结合
setTimeout(() => controller.abort(), 8000)
const controller = new AbortController();
setTimeout(() => controller.abort(), 5000);
try {
const res = await fetch('/api/slow', { signal: controller.signal });
} catch (err) {
if (err.name === 'AbortError') {
console.log('Request timed out or aborted');
}
}
与 axios 等库的关键差异点
如果你从 axios 迁移过来，注意这些行为差异：
-
fetch()没有默认超时，没有自动 JSON 解析，没有请求/响应拦截器 -
fetch()不会自动带上凭据（Cookie），credentials: 'same-origin'才是安全默认 -
response.json()只能调用一次，因为ReadableStream被消费后不可重读；需要多次读取时，先用response.clone() - 错误处理粒度更细：网络层错误（reject）、HTTP 状态异常（需手动判断）、JSON 解析失败（
res.json()reject）是三层独立问题
真正用好 fetch() 不在于写几行代码，而在于始终记得它只是“发送并接收原始响应”，所有业务逻辑（重试、鉴权、缓存、错误映射）都得自己补全。别指望它像封装库一样开箱即用。
