javascript如何发起HTTP请求？【教程】_网络技术

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

JavaScript发起HTTP请求首选fetch()，兼容旧浏览器或需上传进度控制时用XMLHttpRequest；fetch默认不处理HTTP错误状态、不带Cookie、不自动解析JSON，axios则封装了这些功能并默认拒绝4xx/5xx响应。

JavaScript 发起 HTTP 请求，核心就两条路：用 fetch()（现代标准），或用 XMLHttpRequest（老但兼容强）。fetch() 是首选，除非你要支持 IE 或需要精细控制上传进度。

fetch() 返回 Promise，但注意：它只在网络失败（如断网、DNS 错误）时 reject，HTTP 状态码 404、500 等仍会 resolve。必须手动检查 response.ok 或 response.status。

GET 请求：fetch('/api/user') 默认就是 GET，无需额外配置
POST 提交 JSON：fetch('/api/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ user: 'a', pass: 'b' }) })
忘记 await response.json() 就直接用结果？会得到一个 Promise，不是数据 —— 常见“undefined”来源
默认不带 Cookie，要发送需加 credentials: 'include'（后端也得允许 CORS 凭据）

虽然 XMLHttpRequest 冗长，但在需要监听上传进度、取消请求（abort()）、或兼容 IE11 的场景下仍不可替代。

必须在调用 open() 后、send() 前设置 onload 和 onerror，否则可能错过回调
读取响应体要用 xhr.response（推荐）或 xhr.responseText，别混用；JSON 数据记得 JSON.parse(xhr.response)
设置请求头用 xhr.setRequestHeader('Content-Type', 'application/json')，且必须在 open() 之后、send() 之前
超时控制靠 xhr.timeout = 5000 + xhr.ontimeout，不设的话默认无超时

axios 是封装库，fetch() 是原生 API。不用框架时，fetch() 足够；但如果你频繁处理错误统一、请求拦截、自动序列化/反序列化 JSON、取消重复请求，axios 的 CancelToken（v0.22+ 改用 AbortController）和拦截器就省事得多。

立即学习“Java免费学习笔记（深入）”；

真正容易被忽略的是错误边界：网络中断、CORS 被拒、JSON 解析失败、后端返回非 JSON 内容却调了 .json() —— 这些都得单独 try/catch 或用 .catch() 捕获，不能只靠 if (!res.ok)。