JavaScript如何使用Fetch API发起网络请求

JavaScript 的 Fetch API 虽然以简洁、原生支持 Promise 和 async/await 成为现代网络请求的首选，但其“裸感”设计暗藏诸多易被忽视的陷阱：它默认不校验 HTTP 状态码（404/500 仍会 resolve）、无超时机制、不自动解析 JSON、不携带凭据，且错误处理需分三层——网络失败（Promise reject）、HTTP 异常（需手动检查 response.ok 或 status）、JSON 解析失败（res.json() 可能抛错）；正确使用不仅要求精准配置 headers 与 body（如 JSON 需 stringify + Content-Type，表单用 URLSearchParams，文件用 FormData），还需借助 AbortController 实现取消与超时，并理解 response 流只能消费一次等底层细节——真正驾驭 fetch，关键在于抛弃“开箱即用”的期待，主动补全业务所需的所有健壮性逻辑。

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 组件卸载、用户快速切换页面时，避免内存泄漏和无意义的响应处理。

• 创建 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() 不在于写几行代码，而在于始终记得它只是“发送并接收原始响应”，所有业务逻辑（重试、鉴权、缓存、错误映射）都得自己补全。别指望它像封装库一样开箱即用。

到这里，我们也就讲完了《JavaScript如何使用Fetch API发起网络请求》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！