JavaScript请求教程详解

积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《JavaScript网络请求教程详解》，就带大家讲解一下知识点，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

fetch 是现代首选，但需手动处理 cookie、HTTP 错误、JSON 解析、POST 序列化及 AbortController 取消；IE11 等旧环境仍需 XMLHttpRequest。

直接用 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学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！