太长不看
- XMLHtppRequest:设计关注点不分离(数据输入/输出、状态变化追踪全部在一个对象里)、代码不具备时序性(由callback造成);
- jQuery-ajax:关注点不分离、代码非顺序执行、引入了非标准语义;
- Fetch:基于ES6 Promise设计关注点分离、支持ES6语法、代码具备时序性(async/await、promise)、易于同构、兼容性略低于XMLHtppRequest;
- axios:基于ES6Promise设计关注点分离、支持ES6语法、代码具备时序性、易于同构、封装完善久经沙场适合在生产环境使用;
- XMLHtppRequest年老色衰,Fetch初露锋芒,axios正当壮年;
- 本文完(大雾)
XMLHtppRequest
- 扫盲:
早期的网页但凡遇到获取数据的场景就要刷新页面,交互体验?没有的根本不存在。XMLHttpRequest(后文称XHR)就是此场景的解决方案用以改善体验。由XHR提供HTTP能力使浏览器与服务器产生交互(获取/提交数据),这些交互也不再需要刷新页面而只是局部更新。
XHR是一个对象,这个对象下包含有许多“能力”,譬如:- Event handler
事件处理回调:onloadstart、onprogress、onabort、onerror、onload、ontimeout、onloadend、onreadystatechange - readyState
XHR的状态值:unsent(0)、opened(1)、headers received(2)、loading(3)、done(4) - Request Concept
请求概念:XHR下的open、setRequestHeader、timeout、send、abort、withCrendtials等都属于这个概念; - Response Concept
响应概念:XHR下的responseURL、status、response等都属于这个概念;
- Event handler
Event handler和readyState将不再赘述,值得关注的是Request和Response两个概念。为什么叫概念?
因为在XHR对象中并不存在名为Response/Request的属性/对象/方法。下图是XHR的内部构造示意图,可以看到XHR本身拥有非常多的属性、方法导致内部混乱它既有Request也有Response的方法,同时还包含状态追踪的EventHandler。正是因此XHR本身的实现略显混乱。
同时也导致XHR的代码在书写上更易混淆,譬如初学者就不容易分清readyState(xhr的状态)和status(网络请求的状态)、response和responseText等。基于回调的书写方式也增加了代码阅读难度,下面是使用XHR对象发起HTTP请求的简单例子:
// 老版本IE的兼容
var xhr
if (window.XMLHttpRequest) {
// Mozilla, Safari...
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
// IE
try {
xhr = new ActiveXObject('Msxml2.XMLHTTP');
} catch (e) {
try {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
} catch (e) {
}
}
}
// onreadystatechange 方法
var onReadyStateChange = () => {
if