javascript如何发送HTTP请求_怎样使用fetch API

狼影 2026-01-12 00:00:00 次阅读

fetch 是现代浏览器原生 Promise-based HTTP 接口，区别于 XMLHttpRequest：不自动带 cookie、不设默认 Content-Type、非网络错误（如 404/500）不会 reject，需手动检查 response.ok。

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

实际项目里最常卡住的不是语法，而是忘记检查 response.ok、混淆 body 类型、或者在未配置 credentials 时调用