目前前端中发送网络请求的方式有很多种
- 选择一: 传统的Ajax是基于XMLHttpRequest(XHR)
- 配置和调用方式等非常混乱. 编码起来看起来就非常蛋疼. 真实开发中很少直接使用
- 选择二: jQuery-Ajax
- 相对于传统的Ajax非常好用. 但也不推荐, jQuery整个项目太大,单纯使用ajax却要引入整个JQuery非常的不合理(采取个性化打包的方案又不能享受CDN服务)。
- 基于原生的XHR开发,XHR本身的架构不清晰,已经有了fetch的替代方案; 尽管JQuery对我们前端的开发工作曾有着深远的影响,但是的确正在推出历史舞台;
- 选择三: Fetch API。 Fetch是AJAX的替换方案,基于Promise设计,很好的进行了关注分离,有很大一批人喜欢使用fetch进行项目开发; 但是Fetch的缺点也很明显:
- Fetch是一个 low-level(底层)的API,没有帮助你封装好各种各样的功能 和实现;
- 发送网络请求需要自己来配置Header的Content-Type,不会默认携带cookie等;
- 错误处理相对麻烦(只有网络错误才会reject,HTTP状态码404或者500不会被标记为reject);
- 不支持取消一个请求,不能查看一个请求的进度等等;
- 选择四: axios是目前前端使用非常广泛的网络请求库,包括Vue作者也是推荐在vue中使用axios; 主要特点包括:
- 在浏览器中发送 XMLHttpRequests 请求、在 node.js 中发送 http请求、支持 Promise API、拦截请求和 响应、转换请求和响应数据等等;
- axios: ajax i/o system
一个用来测试http请求的网站: httpbin.org
为什么要对axios进行二次封装?
默认情况下我们是可以直接使用axios来进行开发的;
但是我们考虑一个问题,假如有100多处中都直接依赖axios,突然间有一天axios出现了重大bug,并且该库已经不再维护, 这个时候你如何处理呢? 大多数情况下我们会寻找一个新的网络请求库或者自己进行二次封装;但是有100多处都依赖了axios,非常不方便修改,所以要进行二次封装。