ajax和fetch的区别到底在哪？搞懂核心差异再也不纠结

做前端开发时，你是不是也有过这种纠结？要发网络请求了，盯着代码框犯难——选ajax还是fetch？明明都是拿数据，可有时候ajax写着顺手，有时候fetch更清爽，到底差在哪儿？其实答案藏在底层逻辑、使用体验和踩坑细节里：ajax依赖XHR对象，得裹着回调写代码；fetch是浏览器原生API，天生支持Promise，语法更简洁，但error处理有“小陷阱”——404、500不会直接抛错，得自己判断状态码；就连请求配置都不一样：ajax的async、headers是“老熟人”，fetch的credentials默认不发Cookie，一不小心就踩跨域坑……这篇文章把这些核心差异掰碎了讲清楚，不管你是刚入门的新人，还是常写请求的老鸟，读完就能秒懂“什么时候该用谁”，下次写代码再也不用站在两个选项前犹豫！

做前端开发时，你是不是也有过这种纠结？要发网络请求了，盯着代码框犯难——选ajax还是fetch？明明都是拿数据，可有时候ajax写着顺手，有时候fetch更清爽，到底差在哪儿？其实答案藏在底层逻辑、使用体验和踩坑细节里：ajax依赖XHR对象，得裹着回调写代码；fetch是浏览器原生API，天生支持Promise，语法更简洁，但error处理有“小陷阱”——404、500不会直接抛错，得自己判断状态码；就连请求配置都不一样：ajax的async、headers是“老熟人”，fetch的credentials默认不发Cookie，一不小心就踩跨域坑……这篇文章把这些核心差异掰碎了讲清楚，不管你是刚入门的新人，还是常写请求的老鸟，读完就能秒懂“什么时候该用谁”，下次写代码再也不用站在两个选项前犹豫！

本文常见问题（FAQ）

ajax和fetch的底层依赖不一样吗？

对，俩东西的“地基”差别挺大的。ajax本质上是用浏览器里的XHR（XMLHttpRequest）对象实现的，你写ajax代码时，其实是在操作这个XHR对象，得裹着回调函数一层一层嵌套；但fetch是浏览器后来新增的原生API，不用依赖其他对象，直接就能调用，语法上比ajax干净不少。

为什么说fetch的error处理有“小陷阱”？

因为fetch的错误判断逻辑和咱们直觉不一样——不管服务器返回404（找不到资源）还是500（服务器内部错误），它都不会直接抛出错误，只会把Promise状态变成resolved。你得自己在then方法里检查response的status码，比如看是不是200到299之间的成功状态，不然很容易漏掉错误。我之前写fetch请求时没注意这个，服务器返回500了我还以为请求成功，调了半天才找到问题。

fetch默认不发Cookie吗？要怎么解决？

对，fetch的credentials参数默认是“same-origin”，意思是只有同域名的请求才会带Cookie，跨域请求默认不带。要是你需要跨域请求也发送Cookie，得手动把credentials设成“include”，比如写fetch(url, { credentials: ‘include’ })。我之前做项目时就踩过这坑，跨域请求服务器一直返回未登录，后来才发现是没设置这个参数。

ajax和fetch在Promise支持上有什么区别？

ajax本身是基于回调函数的，要是你想写Promise风格的ajax，得自己把XHR对象裹进Promise里，或者用jQuery的$.ajax（它帮你封装了Promise）；但fetch天生就返回Promise，直接就能用then链或者async/await语法，比如async function getdata() { const res = await fetch(url); const data = await res.json(); }，比ajax的回调嵌套舒服多了。

新手学前端，选ajax还是fetch比较好？

其实看你做什么项目。要是学老项目或者想理解底层逻辑，先学ajax没问题，因为很多 legacy 代码还在用，而且搞懂XHR对象能帮你明白网络请求的原理；但要是做新项目，我 优先试fetch，它语法更简洁，符合现代前端的Promise和async/await风格，就是得注意那些小陷阱（比如检查状态码、设置credentials）。我带的新人里，好多一开始怕fetch，用过几次后都说比ajax顺手。

YUANLEISVIP

收藏 链接