1, 传统 Ajax 指的是 XMLHttpRequest(XHR), 最早出现的发送后端请求技术, 隶属于原始 JS 中, 核心使用 XMLHttpRequest 对象, 多个请求之间如果有先后关系的话, 就会出现回调地狱.
jQuery Ajax 是对原生 XHR 的封装, 除此以外还增添了对 JSONP 的支持. 经过多年的更新维护, 真的已经是非常的方便了, 优点无需多言; 如果是硬要举出几个缺点, 那可能只有:
1. 本身是针对 MVC 的编程, 不符合现在前端 MVVM 的浪潮
2. 基于原生的 XHR 开发, XHR 本身的架构不清晰.
3.jQuery 整个项目太大, 单纯使用 Ajax 却要引入整个 jQuery 非常的不合理 (采取个性化打包的方案又不能享受 CDN 服务)
4. 不符合关注分离 (Separation of Concerns) 的原则
5. 配置和调用方式非常混乱, 而且基于事件的异步模型不友好.
2.axios 它本身具有以下特征:
1. 从浏览器中创建 XMLHttpRequest
2. 支持 Promise API
3. 客户端支持防止 CSRF
4. 提供了一些并发请求的接口 (重要, 方便了很多的操作)
5. 从 node.JS 创建 http 请求
6. 拦截请求和响应
7. 转换请求和响应数据
8. 取消请求
9. 自动转换 JSON 数据
3.fetch
fetch 号称是 Ajax 的替代品, 是在 ES6 出现的, 使用了 ES6 中的 promise 对象. Fetch 是基于 promise 设计的. Fetch 的代码结构比起 Ajax 简单多了, 参数有点像 jQuery Ajax. 但是, 一定记住 fetch 不是 Ajax 的进一步封装, 而是原生 JS, 没有使用 XMLHttpRequest 对象.
fetch 的优点:
1. 符合关注分离, 没有将输入, 输出和用事件来跟踪的状态混杂在一个对象里
2. 更好更方便的写法
坦白说, 上面的理由对我来说完全没有什么说服力, 因为不管是 jQuery 还是 Axios 都已经帮我们把 xhr 封装的足够好, 使用起来也足够方便, 为什么我们还要花费大力气去学习 fetch?
我认为 fetch 的优势主要优势就是:
语法简洁, 更加语义化
基于标准 Promise 实现, 支持 async/await
同构方便, 使用 [isomorphic-fetch](https://github.com/matthew-andrews/isomorphic-fetch)
更加底层, 提供的 API 丰富 (request, response)
脱离了 XHR, 是 ES 规范里新的实现方式
最近在使用 fetch 的时候, 也遇到了不少的问题:
fetch 是一个低层次的 API, 你可以把它考虑成原生的 XHR, 所以使用起来并不是那么舒服, 需要进行封装.
例如:
)fetch 只对网络请求报错, 对 400,500 都当做成功的请求, 服务器返回 400,500 错误码时并不会 reject, 只有网络错误这些导致请求不能完成时, fetch 才会被 reject.
)fetch 默认不会带 cookie, 需要添加配置项: fetch(url, {credentials: 'include'})
)fetch 不支持 abort, 不支持超时控制, 使用 setTimeout 及 Promise.reject 的实现的超时控制并不能阻止请求过程继续在后台运行, 造成了流量的浪费
)fetch 没有办法原生监测请求的进度, 而 XHR 可以
来源: http://www.bubuko.com/infodetail-3018944.html