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

苏承栈

2026-09-15 • 👁 0人浏览过

fetch() 是现代标准但需手动补全 Cookie、错误处理和超时；常见无响应因忘 await/.then()，且 4xx/5xx 不 reject；需检查 res.ok、JSON.stringify、FormData 用法、GET 无 body、credentials 控制跨域 Cookie、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

选项控制。 Comet AI 浏览器下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。下载立即学习 “ Java免费学习笔记（深入） ”；同域请求：无需额外配置，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()

只是基础工具，封装层才决定项目里请求代码是否可维护。

相关文章