JavaScript发起HTTP请求的5种方式

本文深入解析了JavaScript发起HTTP请求的三大核心方案——现代原生API fetch()、兼容性更强的XMLHttpRequest以及功能丰富的第三方库axios，重点揭示了它们在错误处理（如404/500状态码是否触发reject）、Cookie携带、JSON自动解析、上传进度控制、请求取消、超时配置及CORS凭据支持等方面的本质差异与典型陷阱；无论你是想轻量用好fetch()，还是需兼容旧浏览器或精细化控制请求流程，亦或追求工程化开发体验，都能从中获得清晰、实用、避坑的选型指南和代码实践要点。

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

fetch() 基本用法和常见坑

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 怎么写才不掉坑

虽然 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？选型关键点

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

• axios 默认解析 JSON，fetch() 不做 —— 你得自己 .then(r => r.json())
• axios 对 4xx/5xx 默认 reject，fetch() 不 —— 这是最大行为差异
• axios 的 baseURL、timeout、headers 可全局配置；fetch() 每次都要传对象
• 注意：axios v1+ 已弃用 axios.CancelToken，改用原生 AbortController，和 fetch() 统一了取消机制

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

好了，本文到此结束，带大家了解了《JavaScript发起HTTP请求的5种方式》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！