image.png
1.Ajax
Ajax即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
用法：
$.ajax({
type: 'POST',
url: url,
data: data,
dataType: dataType,
success: function() {},
error: function() {}
});
优点：
- 提高了性能和速度：减少了客户端和服务器之间的流量传输，同时减少了双方响应的时间，响应更快，因此提高了性能和速度
- 交互性好：使用ajax，可以开发更快，更具交互性的Web应用程序
- 异步调用：Ajax对Web服务器进行异步调用。这意味着客户端浏览器在开始渲染之前避免等待所有数据到达。
- 节省带宽：基于Ajax的应用程序使用较少的服务器带宽，因为无需重新加载完整的页面
- 底层使用XMLHttpRequest
- 拥有开源JavaScript库 ： JQuery，Prototype，Scriptaculous等。
- AJAX通过HTTP协议进行通信。
缺点：
- 增加了设计和开发的时间
- 比构建经典Web应用程序更复杂
- Ajax应用程序中的安全性较低（容易收到CSRF和XSS攻击)，因为所有文件都是在客户端下载的
- 可能出现网络延迟的问题
- 禁用javascript的浏览器无法使用该应用程序
- 由于安全限制，只能使用它来访问服务于初始页面的主机的信息。如果需要显示来自其他服务器的信息，则无法在AJAX中显示。
2.axios
axios 基于promise用于浏览器和node.js的http客户端。
用法：
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
优点：
- 从node.js创建http请求
- 在浏览器中创建XMLHttpRequest
- 支持Promise API
- 提供了一些并发请求的接口
- 支持拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防御CSRF/XSRF
3.fetch
fetch号称是AJAX的替代品，是在ES6出现的，使用了ES6中的promise对象。Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多了，参数有点像jQuery ajax。但是，一定记住fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。（然而问题还是有很多）
用法：
try {
let response = await fetch(url);
let data = response.json();
console.log(data);
} catch(e) {
console.log("Oops, error", e);
}
优点：
- 符合关注分离，没有将输入、输出和用事件来跟踪的状态混杂在一个对象中
- 更好更方便的写法
- 更加底层，提供的API丰富（request，response）
- 脱离了XHR，是ES规范里新的实现方式
缺点：
- fetch只对网络请求报错，对400，500都当做成功的请求，需要封装去处理
- fetch默认不会带cookie，需要添加配置项
- fetch不支持abort,不支持超时控制，使用setTimeout及Promise.reject和Promise.race结合setTimeout实现的超时控制并不能阻止请求过程继续在后台执行，造成了量的浪费
- fetch没有办法原生监测请求的进度，而XHR可以
