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 错误状态不会
示例:
科美智能企业网站管理系统标准版(带手机版)是以asp+access进行开发的企业网站系统,软件还包含了全站生成静态页面的功能。特别提醒:1.切勿用那些调试软件调试(比如:aspweb、NETBOX、小旋风等),如果您想本地运行源码,请参照赠品中的环境搭建教程。
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),但底层还是绕不开上面几条。









