Fetch API 更简洁但默认不带 Cookie,需显式设置 credentials;不自动处理 HTTP 错误和超时,需手动检查 response.ok 并用 AbortController 控制;非 JSON 响应需调用对应解析方法;IE 不支持 fetch,兼容场景应优先选 XMLHttpRequest 或 axios。

Fetch API 比 XMLHttpRequest 更简洁,但默认不带 Cookie
Fetch 是现代浏览器原生支持的异步通信接口,语法比 XMLHttpRequest 清晰得多,尤其适合 Promise 链式调用。但它有个关键默认行为:fetch() 发起的请求默认不会携带 Cookie,即使域名一致,服务端也收不到 session 信息。
- 必须显式传入
{ credentials: 'include' }才能发送 Cookie;若只对特定域名发凭证,可用'same-origin' -
fetch()不会自动拒绝 HTTP 错误状态(如 404、500),需手动检查response.ok或response.status - 没有内置超时控制,需靠
AbortController实现,例如:const controller = new AbortController();
fetch('/api/data', { signal: controller.signal })
.catch(err => { if (err.name === 'AbortError') console.log('请求已取消'); });
setTimeout(() => controller.abort(), 5000);
Ajax 是概念,不是某个具体 API
“Ajax”(Asynchronous JavaScript and XML)是早年对“不刷新页面发起后台请求”这一模式的统称,并非某一个函数或标准。过去常用 XMLHttpRequest 实现,现在也有人用 fetch 或第三方库(如 axios)完成同样目标。所以不存在“Ajax API”,只有实现 Ajax 的工具。
- 面试或文档中看到 “用 Ajax 提交表单”,实际要选的是具体技术:是写
new XMLHttpRequest(),还是调fetch(),或是引入axios.post() -
XMLHttpRequest支持进度监听(upload.onprogress)、手动中断(.abort())、兼容 IE10+,但回调嵌套深、不易组合 - 别再搜 “Ajax 请求怎么写”——先明确你用的是哪个底层机制,再查对应文档
JSON 数据交互时,fetch 要手动调用 response.json()
fetch() 返回的 Response 对象不是直接可读的数据,而是一个流式响应体,必须显式解析。常见错误是忘记 .then(res => res.json()) 就直接尝试访问字段,结果得到 Promise { 或报错 res.json is not a function。
- 后端返回 JSON,前端必须链式调用:
fetch('/api/user')
.then(res => {
if (!res.ok) throw new Error(`HTTP error: ${res.status}`);
return res.json();
})
.then(data => console.log(data.id)); - 若后端返回纯文本或 HTML,改用
res.text();返回 Blob 用res.blob() -
axios会自动解析 JSON,所以看起来更“省事”,但那是封装层做的,不是 fetch 本身的特性
IE 浏览器不支持 fetch,但 polyfill 可能掩盖错误
IE10/11 完全不支持 fetch,哪怕加了 whatwg-fetch 这类 polyfill,某些行为仍不一致:比如 polyfill 无法真正支持 AbortController,也不处理重定向的跨域限制。
立即学习“Java免费学习笔记(深入)”;
- 若项目必须兼容 IE,优先用
XMLHttpRequest,或统一用axios(它内部自动降级) - 不要只测 Chrome/Firefox 就上线;在 IE 中打开开发者工具,输入
typeof fetch,确认是否为"function" - polyfill 后仍出现
TypeError: Failed to fetch,大概率是 CORS 或证书问题,不是兼容性问题









