JavaScript如何用Fetch发送请求？

JavaScript 的 fetch() 虽是现代网络请求的标准方案，却并非“开箱即用”：它默认不携带 Cookie、不将 4xx/5xx 视为错误、不支持超时与取消，这些看似“缺陷”的行为实为刻意设计——真正考验开发者的是如何手动补全 res.ok 校验、JSON.stringify 序列化、credentials 跨域认证控制、AbortController 超时取消等关键细节，而能否将这些零散逻辑封装成统一、健壮、可维护的请求层，才决定了项目中网络交互的可靠性和开发体验。

JavaScript 发送网络请求，fetch() 是现代标准方案，但默认不带 Cookie、不自动处理 4xx/5xx 状态、不支持超时——这些不是“bug”，而是设计选择，得手动补全。

为什么 fetch() 调用后页面没反应？

常见原因是忘记 await 或漏掉 .then()，且 fetch() 只在**网络失败**（如断网、DNS 错误）时 reject，HTTP 状态码 404、500 仍算 fulfilled。

• 检查是否写了 await fetch(...) 或 fetch(...).then(res => {...})
• 手动判断 res.ok（即 res.status >= 200 && res.status ）
• 别直接 console.log(fetch(...))，那只是打印一个 Promise 对象

fetch() 怎么发 POST 并传 JSON？

必须显式设置 Content-Type 请求头，且 body 需是字符串（不能直接传对象）。

fetch('/api/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ username: 'admin', password: '123' })
})
.then(res => {
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.json();
});

• JSON.stringify() 不可省略，否则后端收不到合法 JSON
• 若后端用 form-data，改用 FormData 实例作 body，此时不要设 Content-Type（浏览器会自动生成带 boundary 的 header）
• GET 请求不能有 body，参数只能拼在 URL 后

如何让 fetch() 带 Cookie 或支持跨域认证？

默认情况下，fetch() 跨域请求不发 Cookie，也不暴露响应头（如 Set-Cookie），需靠 credentials 选项控制。

• 同域请求：无需额外配置，Cookie 自动携带
• 跨域请求要发 Cookie：加 credentials: 'include'，且后端必须返回 Access-Control-Allow-Credentials: true
• 注意：credentials: 'include' 时，Access-Control-Allow-Origin 不能为 *，必须指定具体域名

怎么给 fetch() 加超时或取消请求？

fetch() 本身不支持超时，也无原生取消机制，得靠 AbortController + timeout 模拟。

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

fetch('/api/data', {
  signal: controller.signal
})
.finally(() => clearTimeout(timeoutId));

• controller.abort() 会触发 fetch() Promise reject，错误类型是 DOMException，name === 'AbortError'
• 多个并发请求共用一个 AbortController 可一键取消全部
• 超时时间不能靠 setTimeout 精确控制（网络阻塞时可能延迟），仅作粗略防护

真正难的不是调通一次请求，而是统一处理错误路径、鉴权刷新、缓存策略和 loading 状态——fetch() 只是基础工具，封装层才决定项目里请求代码是否可维护。

以上就是《JavaScript如何用Fetch发送请求？》的详细内容，更多关于的资料请关注golang学习网公众号！