持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第27天
点击查看活动详情
一、jQuery 中 ajax 、fetch、 axios 有什么异同，适用场景有哪些
- jQuery ajax
$.ajax({
type: 'POST',
url: url,
data: data,
dataType: dataType,
success: function () {},
error: function (){}
});
优缺点：
本身是针对 MVC 的编程,不符合现在前端 MVVM 的浪潮
JQuery 整个项目太大，单纯使用 ajax 却要引入整个 JQuery 非常的不合理（采取个性化打包的方案又不能享受 CDN 服务）
2.axios axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
} }) .then(function (response) {
console.log(response);
})
客户端支持防止 CSRF/XSRF 自动转换 JSON 数据 取消请求 转换请求和响应数据 拦截请求和响应支持 Promise API 从 node.js 发出 http 请求 从浏览器中创建XMLHttpRequest axios 是一个基于 Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：
为什么要用 axios?
1）fetch 没有办法原生监测请求的进度，而 XHR 可以
2）fetch 不支持 abort，不支持超时控制，使用 setTimeout 及 Promise.reject 的实现的超时控制并不能阻止请求过程继续在后台运行，造成了量的浪费
3）fetch 默认不会带 cookie，需要添加配置项 1）fetchtch 只对网络请求报错，对 400，500 都当做成功的请求，需要封装去处理脱离了 XHR，是 ES 规范里新的实现方式 更加底层，提供的 API 丰富（request, response） 更好更方便的写法符合关注分离，没有将输入、输出和用事件来跟踪的状态混杂在一个对象里优缺点：
}
let data =response.json();
let response = await fetch(url);
try {
catch(e) { console.log(data);
console.log("Oops,error", e); }
3.fetch 提供了一些并发请求的接口（重要，方便了很多的操作） 客户端支持防止 CSRF 支持Promise API 从 node.js 创建 http 请求 优缺点：
});
console.log(error); .catch(function (error) { })
二、AJAX 注意事项及适用和不适用场景
Ajax 开发时，网络延迟——即用户发出请求到服务器发出响应之间的间隔——需要慎重考虑。不给予用户明确的回应，没有恰当的预读数据，或者对 XMLHttpRequest 的不恰当处理，都会使用户感到延迟，这是用户不希望看到的，也是他们无法理解的。通常的解决方案是，使用一个可视化的组件来告诉用户系统正在进行后台操作并且正在读取数据和内容。
1.Ajax 适用场景
<1>.表单驱动的交互
<2>.深层次的树的导航
<3>.快速的用户与用户间的交流响应
<4>.类似投票、yes/no 等无关痛痒的场景
<5>.对数据进行过滤和操纵相关数据的场景
<6>.普通的文本输入提示和自动完成的场景
2.Ajax 不适用场景
<1>.部分简单的表单
<2>.搜索
<3>.基本的导航
<4>.替换大量的文本
<5>.对呈现的操纵
