javascript怎样进行网络请求【教程】_网络技术_宿州市腾雀网络科技有限公司

发布时间 - 2026-01-25 00:00:00 点击率：次

JavaScript 网络请求首选 fetch，但需手动处理错误（如检查 response.ok 或 status）、正确设置 POST 的 Content-Type 与 body、显式配置 credentials 支持 cookie 或 JWT，并注意 IE 兼容性及请求生命周期控制。

JavaScript 做网络请求，首选 fetch；它原生支持、语法简洁、返回 Promise，比老旧的 XMLHttpRequest 更可靠。但直接用 fetch 有坑，尤其错误处理和跨域场景，得手动补全逻辑。

fetch 只在网络失败（如断网、DNS 失败）时 reject，而 HTTP 状态码 404、500、401 等仍算“成功”，response.ok 为 false，但 Promise 并不中断。不检查就直接 await response.json()，容易掩盖服务端报错。

务必在 await fetch(...) 后加 if (!response.ok) throw new Error(...)
或统一封装：判断 response.status >= 400 时主动 throw
response.headers.get('content-type') 可提前判断是否能安全调用 .json()，避免解析空响应或 HTML 错误页时报错

默认 fetch 不带任何 header，且 body 必须是字符串、FormData 或 Blob，不能直接传对象。

发 JSON：设 headers: { 'Content-Type': 'application/json' }，并用 JSON.stringify(data) 转换 body
发表单数据：用 new FormData()，不用设 Content-Type（浏览器会自动生成带 boundary 的 multipart 类型）
发 URL 编码表单：new URLSearchParams(data).toString()，再配 'application/x-www-form-urlencoded'

默认 fetch 不发送 cookie，即使同域；跨域请求更需显式声明。

同域带 cookie：加 credentials: 'include'
跨域且后端允许凭据：后端响应头必须含 Access-Control-Allow-Credentials: true，且 Access-Control-Allow-Origin 不能为 *（得写具体域名）
JWT 场景常用 Authorization header：headers: { Authorization: 'Bearer ' + token }

若需支持 IE11 或更低版本，不能只靠 polyfill —— whatwg-fetch 能补基础功能，但不支持 AbortController（取消请求）、keepalive 等现代特性。

真正麻烦的不是怎么发请求，而是怎么让一次请求在各种失败路径下都可预测地结束——比如用户切页时未完成的请求还在解析响应，或者连续点击触发重复提交。这些得靠 AbortController、防抖、loading 状态隔离来兜底，而不是寄希望于 fetch 自己扛住。