那个又爱又恨的“底座”：XHR

好咱们先来认识一下所有现代请求方案的祖宗——XMLHttpRequest简称 XHR。你别看它名字里带 XML其实早跟 XML 没啥关系了现在清一色的前后端传输数据都用JSON了。怎么说呢我的理解是它的工作方式特别像你打电话到银行办业务咱们一般都是先拨号xhr.open(GET, url)然后对着话筒说我要办啥啥业务xhr.send()接着就举着电话干等直到对面传来xhr.onload的回应。听起来还行是吧但要是你一口气要办五件事回调地狱能直接给你安排得“明明白白”看清楚了是加引号的。 原生 XHR 写法长这样感受一下吧const xhr new XMLHttpRequest();xhr.open(GET, /api/user);xhr.onload function() {if (xhr.status 200) {console.log(JSON.parse(xhr.responseText));}};xhr.send();你可能会问“这也没有回调地狱呀”那试想一下你在第一个请求200后需要再用返回数据进一步请求呢那这整个套餐是不是就要再来一份这里还有一点要特别注意XHR 对请求状态的判断特别啰嗦onload只处理成功网络错误你得监听onerror超时还得单独设timeout漏掉一个线上就能崩给你看。️ jQuery 时代的“温柔乡”后来 jQuery 出现了用$.ajax()一个方法把我们从严苛的回调和浏览器兼容地狱里捞了出来。更绝的是它搞出了$.get、$.post这些简写配合done、fail的链式语法简直丝滑。 jQuery 封装下的请求就清晰得像点外卖了$.ajax({url: /api/user,type: GET,dataType: json}).done(function(data) {console.log(data);}).fail(function(jqXHR, textStatus) {console.log(请求失败 textStatus);});但是重点来了已经2026了现在要是你还为发个请求就引入一整个几十 KB 的 jQuery 库项目打包体积就上去了。咱们选择工具我认为顺手的才是最好的没必要为了用个螺丝刀就搬来整个工具箱真不值当。于是原生fetch成了咱的新希望。 Fetch 很现代但坑也多到防不胜防fetch是 ES6 带来的原生 API基于 Promise写起来终于有了现代 JavaScript 的味道。但很不爽的是它那个“只拒网络错不拒 HTTP 错”的臭脾气让我实实在在地翻过几次车怎么改都拿不到数据。 给你演示下它最基本的请求fetch(/api/user).then(res res.json()).then(data console.log(data)).catch(err console.log(出错啦, err));你以为这样写就 Ok 了成功了咱能拿到解析的数据出错了有catch呢不不不你高估了它的 catch如果服务器返回 404 或 500fetch默认也当作“成功了”.catch根本抓不到你这时还在兴高采烈地去res.json()那解析出来的东西可能完全不是你想的那个了页面可能直接就报错了。根据以往的血泪经验正确的做法还是要先检查res.ok不 ok 立刻手动抛出一个错误不然等线上用户截图过来你 debug 都找不到北。 还有两个容易翻车的点fetch默认不携带 cookie需要手动设置credentials: include。处理超时也是个麻烦得配合AbortController写一堆模板代码远不如第三方库方便。 为什么说 Axios 是当下的“最优解”终于说到我的心头好了。Axios 本质上也是对 XHR 的封装但它把我们在fetch上踩过的坑全用贴心的默认配置填平了。 看这段 Axios 代码舒坦吗axios.get(/api/user).then(res console.log(res.data)).catch(err {if (err.response) {// 服务器返回了状态码且超出 2xxconsole.log(状态错误 err.response.status);} else if (err.request) {// 请求发出去了但没收到响应console.log(网络超时或无响应);}});它直接帮你把“非 2xx 状态码”判为reject省去了手写检查。返回数据也已经自动包装在res.data里了它还内置了超时配置、请求拦截器和响应拦截器全局处理 loading 和 token 刷新简直不要太优雅。再啰嗦一句我在几乎所有项目里都会直接用 Axios 实例封装一个request.js把 baseURL、超时时间、统一错误弹窗全配进去整个项目的 HTTP 层一下就干净了谁都别想偷偷写“裸请求”。 一张表说清怎么选XHR除非你在维护 IE 老古董否则别主动用。jQuery Ajax旧项目有在用就接着用新项目别为了它引入 jQuery。Fetch适合写点 Demo、Service Worker 或对包体积要求极致的小工具但记得一定要手写中间件逻辑处理好错误和超时。Axios团队协作、中大型项目、需要请求/响应拦截的场景闭眼选它。代码量少坑基本被填平心情愉悦。但说到底选哪个都不是绝对的真理还是要看你的项目上下文。但作为摸爬滚打多年的程序媛我太清楚“少写一行就是赚到少踩一坑就是大福”的真理了。如果你不想把时间耗在跟fetch的各种小脾气作斗争上Axios 就是