千锋教育 笔记ajax ajax axios

千锋教育那套 Ajax 课程里，千锋有个案例我印象特别深：一个学员照着视频敲完 XMLHttpRequest 的教育代码，浏览器控制台却报 CORS 错误，笔记他折腾了两小时，千锋最后发现是教育后端接口没开跨域头。这事儿说明一个挺实在的笔记问题——Ajax 这玩意儿，原理不难，千锋但真到浏览器里跑起来，教育坑都在细节上。笔记

先说说 Ajax 本身。千锋它不是教育什么新技术，核心就是笔记 XMLHttpRequest 这个对象。你可以把它想象成浏览器里藏的千锋一个“跑腿小哥”，页面不用刷新，教育它就能偷偷跟服务器要数据。笔记千锋的笔记里写得很直白：创建 xhr 对象、调 open、调 send、监听 onreadystatechange，四步走。但笔记也特意标了一句——readyState 等于 4 且 status 等于 200，才算真正拿到数据。很多新手只判断 readyState，结果 404 的时候也以为请求成功了，后面渲染直接崩掉。

原生 Ajax 写起来确实啰嗦。每次都要 new 一个对象，手动拼 query string，还要自己处理 JSON.parse。千锋的讲师在课上吐槽过：“你要是每个页面都这么写，一天下来手指头都能敲出茧子。”所以后来就有了 jQuery 的 $.ajax，再后来 axios 成了主流。这个演进路线不是拍脑袋来的，是开发者被回调地狱和重复代码逼出来的。

axios 好在哪？千锋笔记里列了几条：基于 Promise、自动转换 JSON、支持请求和响应拦截器、能取消请求。我补一条实际感受——它的错误处理比原生舒服太多。原生 xhr 出错时，你得去翻 status 码，还得区分网络错误和 HTTP 错误。axios 直接把错误扔进 catch，response 和 request 分得清清楚楚。有个做后台管理系统的学员跟我说，他之前用原生写登录超时跳转，写了三十多行，换 axios 之后六行搞定。

不过 axios 也不是银弹。千锋的案例里有个坑：默认情况下，axios 发 POST 请求用的是 application/json 格式，但有些老后端只认 application/x-www-form-urlencoded。学员照着文档传了个对象，后端死活收不到参数。解决办法是用 URLSearchParams 或者 qs 库转一下。这种细节，光看官方文档容易漏，得真踩过才知道。

再聊一个实际项目里的观察。现在前端面试，Ajax 相关的问题基本绕不开三块：跨域怎么解决、axios 拦截器怎么用、Promise 和 async/await 怎么配合。千锋的笔记把跨域单独拎了一章，讲了 CORS、JSONP、代理服务器三种方式。其中代理服务器那块，笔记里用的是 webpack-dev-server 的 proxy 配置，但实际工作中，Vue CLI 和 Vite 的配置写法又不一样。所以看笔记不能死记，得理解“浏览器同源策略”这个根儿上的东西。

最后说个挺有意思的现象。千锋的学员里，有人觉得 Ajax 过时了，现在都 fetch 了。但你去翻招聘要求，axios 的出现频率还是远高于 fetch。原因不复杂——axios 的拦截器和取消请求，fetch 原生实现起来太绕。有个学员用 fetch 写文件上传进度条，折腾了一下午，最后换回 axios，十分钟搞定。技术选型这事儿，有时候不是新的就好，得看生态和顺手程度。

学 Ajax 和 axios，别光看笔记里的代码块。打开浏览器，F12 切到 Network 面板，看请求头、响应头、状态码，比背十遍 API 都管用。千锋的讲师有句话我挺认同：“你调试工具用熟了，Ajax 就学会一半了。”