JavaScript使用fetch发送HTTP请求的方法如下：基本语法：fetch(url).then(response=>response.json()).then(data=>console.log(data)).catch(error=>console.error('Error:',error));发送GET请求：fetch('https://api.example.com

本文深入解析了现代 JavaScript 中 `fetch` API 的核心用法与关键陷阱：它虽以简洁优雅的 Promise 风格取代了 XMLHttpRequest，却因不自动携带 Cookie、不默认设置 Content-Type、且对 404/500 等 HTTP 错误不抛异常等“反直觉”设计，让无数开发者踩坑；文章手把手演示了 GET/POST 的正确写法（强调 `response.ok` 校验、`response.json()` 的异步本质、JSON 请求必设 headers 和 `JSON.stringify`）、中止请求的唯一可靠方式（`AbortController`），并直击实际开发中最隐蔽的三大痛点——忽略响应状态检查、混淆请求体类型、遗漏 credentials 配置，帮你避开那些调试数小时才发现的“静默失败”。

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请求的方法如下：基本语法：fetch(url).then(response=>response.json()).then(data=>console.log(data)).catch(error=>console.error('Error:',error));发送GET请求：fetch('https://api.example.com/data').then(response=>response.json()).then(data=>console.log(data)).catch(error=>console.error('Error:',error));发送POST请求：fetch('https://api.example.com/submit',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({key1:'value1',key2:'value2'})}).then(response=>response.json()).then(data=>console.log(data)).catch(error=>console.error('Error:',error));处理响应：response.ok：检查响应是否成功（状态码在200-299之间）。response.json()：将响应体解析为JSON。response.text()：获取原始文本内容。错误处理：使用.catch()捕获网络错误或异常。检查`response》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！