关于javascript:ajax和axiosfetch的区别

44次阅读

共计 2039 个字符，预计需要花费 6 分钟才能阅读完成。

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 的各种问题，而且体积也较小，是当初最应该选用的申请的形式。

正文完