1.jQuery ajax
$.ajax({
type: 'POST',
url: url,
data: data,
dataType: dataType,
success: function () {},
error: function () {}
});
Ajax 指的是 XMLHttpRequest(XHR), 最早呈现的发送后端申请技术,隶属于原始js中,外围应用XMLHttpRequest对象,多个申请之间如果有先后关系的话,就会呈现回调天堂。
JQuery ajax 是对原生XHR的封装,除此以外还削减了对JSONP的反对。
举出几个毛病:
- 自身是针对MVC的编程,不合乎当初前端MVVM的浪潮
- 基于原生的XHR开发,XHR自身的架构不清晰。
- JQuery整个我的项目太大,单纯应用ajax却要引入整个JQuery十分的不合理(采取个性化打包的计划又不能享受CDN服务)
- 不合乎关注拆散(Separation of Concerns)的准则
- 配置和调用形式十分凌乱,而且基于事件的异步模型不敌对。
PS: MVVM(Model-View-ViewModel), 源自于经典的 Model–View–Controller(MVC)模式。MVVM 的呈现促成了 GUI 前端开发与后端业务逻辑的拆散,极大地提高了前端开发效率。MVVM 的外围是 ViewModel 层,它就像是一个中转站(value converter),负责转换 Model 中的数据对象来让数据变得更容易治理和应用,该层向上与视图层进行双向数据绑定,向下与 Model 层通过接口申请进行数据交互,起呈上启下作用。View 层展示的不是 Model 层的数据,而是 ViewModel 的数据,由 ViewModel 负责与 Model 层交互,这就齐全解耦了 View 层和 Model 层,这个解耦是至关重要的,它是前后端拆散计划施行的最重要一环。
2.axios
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,实质上也是对原生XHR的封装,只不过它是Promise的实现版本,合乎最新的ES标准,它自身具备以下特色:
1.从浏览器中创立 XMLHttpRequest
2.反对 Promise API
3.客户端反对避免CSRF
4.提供了一些并发申请的接口(重要,不便了很多的操作)
5.从 node.js 创立 http 申请
6.拦挡申请和响应
7.转换申请和响应数据
8.勾销申请
9.主动转换JSON数据
PS:避免CSRF:就是让你的每个申请都带一个从cookie中拿到的key, 依据浏览器同源策略,混充的网站是拿不到你cookie中得key的,这样,后盾就能够轻松分别出这个申请是否是用户在混充网站上的误导输出,从而采取正确的策略。
3.fetch
try {
let response = await fetch(url);
let data = response.json();
console.log(data);
} catch(e) {
console.log("Oops, error", e);
}
fetch号称是AJAX的替代品,是在ES6呈现的,应用了ES6中的promise对象。Fetch是基于promise设计的。Fetch的代码构造比起ajax简略多了,参数有点像jQuery ajax。然而,fetch不是ajax的进一步封装,而是原生js,没有应用XMLHttpRequest对象。
长处:
- 语法简洁,更加语义化
- 基于规范 Promise 实现,反对 async/await
- 同构不便,应用 [isomorphic-fetch]
- 更加底层,提供的API丰盛(request, response)
- 脱离了XHR,是ES标准里新的实现形式
- 合乎关注拆散,没有将输出、输入和用事件来跟踪的状态混淆在一个对象里
应用fetch的时候,免不了呈现的问题:
1)fetch只对网络申请报错,对400,500都当做胜利的申请,服务器返回 400,500 错误码时并不会 reject,只有网络谬误这些导致申请不能实现时,fetch 才会被 reject。
2)fetch默认不会带cookie,须要增加配置项: fetch(url, {credentials: ‘include’})
3)fetch不反对abort,不反对超时管制,应用setTimeout及Promise.reject的实现的超时管制并不能阻止申请过程持续在后盾运行,造成了流量的节约
4)fetch没有方法原生监测申请的进度,而XHR能够
总结:
axios既提供了并发的封装,也没有fetch的各种问题,而且体积也较小,是当初最应该选用的申请的形式。