JavaScript如何发起网络请求？【教程】

本文深入解析了 JavaScript 中发起网络请求的核心方法——fetch()，强调其作为现代标准方案的简洁性与强大功能，同时系统梳理了实际开发中高频踩坑点：从 GET 请求的参数构造、响应状态的手动校验，到 POST 提交 JSON 时必需的 Content-Type 设置与序列化处理；从默认不携带 Cookie、超时需借助 AbortController 实现，到跨浏览器兼容性、重定向控制及二进制数据支持差异；更关键的是厘清了网络失败、HTTP 错误、解析异常与业务字段缺失四类错误的分层捕获逻辑，帮助开发者写出健壮、可维护、真正可靠的网络请求代码。

用 JavaScript 发起网络请求，fetch() 是当前最直接、标准且无需额外库的选择；XMLHttpRequest 虽仍可用，但写法冗长、错误处理麻烦，新项目不推荐。

用 fetch() 发 GET 请求，记得处理 Promise 链和响应体

fetch() 返回的是 Promise，但「网络成功」不等于「HTTP 状态正常」——比如 404 或 500 响应仍会进入 .then()，必须手动检查 response.ok 或 response.status。

• GET 请求默认不带 body，直接传 URL 字符串即可：fetch('/api/users')
• 想带查询参数？别拼字符串，用 URLSearchParams：fetch(`/api/search?${new URLSearchParams({q: 'js'})}`)
• response.json() 也返回 Promise，要继续 .then() 或 await，不能直接当对象用
• 没有网络时（如断网），fetch() 才会真正 reject，所以 catch 主要捕获连接失败，而非业务错误

POST 提交 JSON 数据，必须设 Content-Type 且 body 要是字符串

很多人卡在这步：直接传对象给 body 会报错，因为 fetch() 不自动序列化。

• 发送 JSON 时，headers 里必须包含 'Content-Type': 'application/json'
• body 必须是字符串，用 JSON.stringify({name: 'Alice'})，不是对象字面量
• 如果后端接收的是表单数据（application/x-www-form-urlencoded），要用 new URLSearchParams(formData).toString()
• 注意：fetch() 默认不带 cookie，跨域需显式加 credentials: 'include'

避免踩 fetch() 的常见兼容性与陷阱

IE 完全不支持 fetch()，Safari 10.1+ 才开始支持部分特性；即使现代浏览器，也有几个隐性坑。

• 超时控制不存在：原生 fetch() 没有 timeout 选项，得靠 AbortController 实现（signal 选项）
• 重定向行为默认是 'follow'，但某些场景下需要 'manual' 来读取重定向响应头
• Android WebView 和旧版 Safari 对 Response.arrayBuffer() 或 response.blob() 支持不稳定，上传/下载二进制要测真机
• 如果用在 Node.js 环境（如 Deno 或最新 Node 18+），fetch 是全局的；但传统 Node 还是得靠 node-fetch 或 undici

真正容易被忽略的，是错误边界的划分：网络中断、HTTP 状态码异常、JSON 解析失败、字段缺失——这四类错误得在不同层级分别捕获，混在一起处理会让调试变得模糊。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。