javascript如何发送网络请求？_学习javascript Fetch API使用【教程】

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

fetch() 是现代标准但需手动补全 Cookie、错误处理和超时；常见无响应因忘 await/.then()，且 4xx/5xx 不 reject；需检查 res.ok、JSON.stringify、FormData 用法、GET 无 body、credentials 控制跨域 Cookie、AbortC
ontroller 实现超时与取消。

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