如何用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。

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

• 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），但底层还是绕不开上面几条。