JavaScript使用fetch发送HTTP请求的方法详解

本文深入解析了现代 JavaScript 中 fetch API 的核心用法与关键陷阱：它并非 XMLHttpRequest 的简单升级，而是一套设计严谨但易被误解的 Promise-based HTTP 接口——不自动携带 Cookie、不默认设置 Content-Type、且对 404/500 等 HTTP 错误静默 resolve，必须手动校验 response.ok；文章手把手演示了 GET 获取 JSON、POST 提交序列化数据的正确写法，拆解了 headers 设置、body 类型、credentials 配置等高频出错点，并详解了通过 AbortController 实现请求中止的唯一可靠方式，直击实际开发中最隐蔽却最常导致调试崩溃的细节问题。

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));

关键点：

• 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，容易导致内存泄漏或状态错乱

终于介绍完啦！小伙伴们，这篇关于《JavaScript使用fetch发送HTTP请求的方法详解》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！