JavaScriptfetch请求教程详解

这篇文章深入浅出地讲解了 JavaScript 中 fetch API 的核心使用要点与高频陷阱：从最简 GET 请求写法出发，强调必须显式调用 `.json()` 等方法解析响应体、用 `response.ok` 判断 HTTP 状态而非依赖 `catch`；详解 POST 请求中 `body` 序列化和 `headers` 配置的必要性；澄清 fetch 对 4xx/5xx 状态码“不报错”的设计逻辑；并引入 `AbortController` 解决请求取消与超时控制这一实际开发痛点——帮你避开线上反复出现却总被误判为“奇怪 bug”的关键误区。

fetch 请求最简写法长什么样

直接用 fetch 发 GET 请求，不需要额外配置就能跑通，但必须手动处理响应体。很多人卡在“请求发出去了，但拿不到数据”，其实是忘了调用 response.json() 或 response.text()。

最简可用示例：

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => console.error('请求失败:', err));

• fetch 默认只返回 Response 对象，不是 JSON 数据
• 必须显式调用 .json()、.text() 或 .blob() 才能读取 body
• .json() 返回 Promise，不能直接写 response.json（漏了括号）

POST 请求要带 body 和 headers 吗

要。GET 请求靠 URL 传参，POST 必须把数据塞进 body，且多数 API 要求 Content-Type: application/json。不设 headers 很可能被后端拒绝或解析成空对象。

常见 POST 写法：

fetch('https://api.example.com/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ username: 'abc', password: '123' })
})
.then(res => res.json())
.catch(err => console.error(err));

• body 必须是字符串或 FormData，对象要先 JSON.stringify
• headers 是对象，不是字符串；键名大小写不敏感，但值要按规范写
• 如果后端用 form-data，就不用设 Content-Type，让浏览器自动加 boundary

为什么 fetch 不报 404 或 500 错误

fetch 只在网络层失败（如断网、DNS 失败、CORS 拒绝）时才进 catch；HTTP 状态码 4xx/5xx 仍算“成功响应”，会进 then。这是最容易踩的坑——你看到 401 却没走错误处理逻辑。

• 检查 response.ok（等价于 response.status >= 200 && response.status ）
• 或手动判断 response.status === 401 等特定状态码
• 别依赖 catch 捕获业务错误，它只管网络异常

推荐写法：

fetch('/api/user')
  .then(response => {
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    return response.json();
  })
  .then(data => console.log(data))
  .catch(err => console.error(err));

如何取消一个正在执行的 fetch 请求

原生 fetch 不支持直接取消，但可以用 AbortController 实现超时或手动中止。没有它，用户切换页面或重复点击时，旧请求还在后台跑，可能造成状态错乱。

• 创建 const controller = new AbortController()
• 把 signal: controller.signal 传进 fetch 配置项
• 调用 controller.abort() 即可中止（触发 AbortError）
• 注意：AbortError 是正常错误，应和网络错误区分开（比如不弹“请求失败”提示）

示例：

const controller = new AbortController();
setTimeout(() => controller.abort(), 5000);

fetch('/api/slow', { signal: controller.signal })
  .then(r => r.json())
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('请求已超时取消');
    } else {
      console.error('其他错误:', err);
    }
  });

实际项目里，fetch 的坑不在语法，而在对响应流、错误分类和中断机制的理解是否到位。尤其 response.ok 和 AbortController 这两个点，线上问题反复出现，却常被当成“奇怪的 bug”去绕开。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~