JavaScriptFetchAPI详解与使用教程

Fetch API 是现代浏览器中发起网络请求的标准化、基于 Promise 的原生接口，相比传统的 XMLHttpRequest 更简洁强大，但其使用细节却暗藏诸多“坑”：它不会因 HTTP 错误状态（如 404、500）自动拒绝 Promise，必须手动检查 `response.ok`；发送 JSON 数据需显式设置 `Content-Type` 并用 `JSON.stringify()` 序列化 body；跨域场景下凭据传递依赖 `credentials` 配置与服务端 CORS 响应头的严格配合；而 `AbortController` 则是应对重复提交、页面卸载等场景下精准取消请求的关键利器——真正掌握 Fetch，不在于写出第一行代码，而在于理解这些不可省略的健壮性保障环节。

Fetch API 是浏览器原生提供的、用于发起网络请求的现代 JavaScript 接口，它比 XMLHttpRequest 更简洁、更基于 Promise，是当前获取数据的事实标准。

Fetch 最基本用法：GET 请求 + JSON 响应

绝大多数场景下，你只需要 fetch(url) + .then(res => res.json()) 就能拿到数据：

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    if (!response.ok) throw new Error(`HTTP error: ${response.status}`);
    return response.json();
  })
  .then(data => console.log(data))
  .catch(err => console.error('请求失败:', err));

• fetch() 返回 Promise，但**不拒绝网络错误（如断网）**，只拒绝语法错误或未捕获异常；response.ok 才是判断 HTTP 状态是否成功的可靠方式
• response.json() 也返回 Promise，且会失败（比如响应体不是合法 JSON），必须单独 catch 或链式处理
• 不要省略 response.ok 检查 —— 否则 404、500 会被当成“成功”，然后在 .json() 阶段静默失败

带配置的 POST 请求：发送 JSON 数据

提交表单、调用接口时，常需设置请求头和请求体：

fetch('/api/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ username: 'alice', password: '123' })
})
.then(r => r.json())
.then(data => console.log(data));

• method 默认是 GET，显式写 'POST' 更安全
• Content-Type 必须手动设为 'application/json'，否则后端可能收不到 body 或解析失败
• body 只接受 string、FormData、Blob 等，不能直接传对象 —— JSON.stringify() 不可少
• 如果后端要求不带 Content-Type（比如某些老旧 API），就别设它；设了却没传 body 会触发预检（CORS OPTIONS），反而出问题

处理 CORS 和凭据（如 Cookie）

跨域请求默认不带 Cookie，登录态无法透传 —— 这是常见 401 错误的根源：

fetch('/api/profile', {
  credentials: 'include' // 或 'same-origin'、'omit'
});

• credentials: 'include' 表示带上 Cookie 和 HTTP 认证信息，但要求服务端响应头包含 Access-Control-Allow-Origin（不能是 *）和 Access-Control-Allow-Credentials: true
• 开发时若本地启了代理（如 Vite 的 server.proxy），其实根本没走跨域，此时设 credentials 反而多余，甚至引发奇怪行为
• 如果你用的是 localhost:3000 调 localhost:8000，哪怕同域名不同端口，也算跨域 —— 浏览器不看 host 是否一样，只看协议+域名+端口三者是否完全相同

AbortController：主动取消请求（尤其防重复提交）

用户快速点击两次“加载”按钮，或页面切换前请求还在跑，会导致状态错乱。用 AbortController 可以干净地终止：

const controller = new AbortController();
fetch('/api/data', { signal: controller.signal })
  .then(r => r.json())
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('请求已被取消');
      return;
    }
    throw err;
  });

// 任意时机调用：
controller.abort(); // 立即中止请求

• signal 是可选配置项，但一旦传入，就必须处理 AbortError，否则会变成未捕获异常
• React/Vue 中常在组件卸载或 effect 清理函数里调 controller.abort()；纯 JS 场景下，建议把 controller 存在变量里，方便后续控制
• 注意：abort() 不会回滚已发出的请求，只是让 fetch Promise 拒绝，并通知浏览器丢弃后续响应；服务器仍可能继续执行

真正难的不是写对 fetch，而是记住哪些环节要检查状态、哪些头必须配、哪些错误要手动抛 —— 尤其是 response.ok 和 credentials 的组合，最容易在线上突然失效。

本篇关于《JavaScriptFetchAPI详解与使用教程》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！