JavaScript请求教程：轻松掌握网络通信

本文深入解析了 JavaScript 网络请求的核心实践，以现代标准 fetch API 为主线，直击开发者最常踩的五大坑：默认不携带 cookie、HTTP 错误状态不触发 catch、响应体需手动解析、POST 发送 JSON 的序列化与 headers 配置、以及 AbortController 的正确使用；同时明确指出 XMLHttpRequest 仅在兼容 IE11 等老旧环境时才需考虑，并强调真实项目中统一处理 token 过期、重试、错误提示和 loading 状态等复杂需求，必须基于这些底层原理进行封装或借助成熟库实现——掌握这些，才算真正用懂 fetch。

直接用 fetch，别碰 XMLHttpRequest —— 除非你得支持 IE11 或更老环境。

fetch 基本用法和常见报错

fetch 默认不带 cookie，也不拒绝非 2xx 状态码（比如 404、500 会进 then 而不是 catch），这是最常踩的坑。

• 必须手动检查 response.ok 或 response.status 才能判断是否真正成功
• 响应体不是 JSON 对象，而是 Response 实例，需调用 response.json()（或 .text()、.arrayBuffer()）才能读取内容
• 网络错误（如断网、域名不存在）才会触发 catch；HTTP 错误状态不会

示例：

fetch('/api/user')
  .then(res => {
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return res.json();
  })
  .then(data => console.log(data))
  .catch(err => console.error('请求失败：', err));

POST 请求怎么传 JSON 数据

发 JSON 不是简单把对象塞进 body，得序列化 + 设置正确 header。

• body 必须是字符串，用 JSON.stringify({})
• 必须显式设置 headers: { 'Content-Type': 'application/json' }
• 如果后端要求带认证，通常加 Authorization 字段

示例：

fetch('/api/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer abc123'
  },
  body: JSON.stringify({ email: 'a@b.c', password: '123' })
});

如何带 cookie 和保持登录态

默认情况下，fetch 不发送 cookie，即使当前域名下已有有效 cookie。

• 必须加 credentials: 'include' 选项（类似 jQuery 的 xhrFields: { withCredentials: true }）
• 若后端是跨域，还需返回 Access-Control-Allow-Credentials: true，且不能设 Access-Control-Allow-Origin: *（得写具体域名）
• 开发时注意：localhost 和 127.0.0.1 被视为不同源，cookie 不共享

AbortController 控制请求生命周期

用户快速切换页面、输入搜索关键词时频繁发请求，旧请求没用还占资源 —— 这时候得取消。

• 创建 const controller = new AbortController()
• 在 fetch 选项中传 signal: controller.signal
• 调用 controller.abort() 即可中止（触发 catch，错误类型为 AbortError）
• React/Vue 组件卸载、输入框防抖取消等场景都靠它

注意：AbortController 在 IE 中不可用，需 polyfill 或降级处理。

真正麻烦的不是怎么发请求，而是怎么统一处理 token 过期、重试逻辑、错误提示、loading 状态 —— 这些没法靠一个 fetch 调用解决，得封装成函数或用库（比如 swr、react-query），但底层还是绕不开上面几条。

终于介绍完啦！小伙伴们，这篇关于《JavaScript请求教程：轻松掌握网络通信》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！