JavaScript如何用Fetch发送请求？

JavaScript 的 `fetch()` 虽是现代网络请求的标准方案，却远非“开箱即用”：它默认不携带 Cookie、不将 4xx/5xx 视为错误、不支持超时与取消，这些看似缺陷实为刻意设计，需开发者手动补全——从牢记 `await` 或 `.then()` 避免无响应，到正确使用 `res.ok` 判断业务状态、`JSON.stringify()` 序列化请求体、`FormData` 处理表单、`credentials` 控制跨域认证，再到借助 `AbortController` 实现超时与取消，每一步都暗藏陷阱；而真正决定项目健壮性的，不是单次调通，而是围绕 `fetch` 构建的统一错误处理、鉴权刷新、缓存和加载状态等封装体系。

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() 只是基础工具，封装层才决定项目里请求代码是否可维护。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。