前后端数据交互(六)——ajax 、fetch 和 axios 优缺点及比较

一、ajax、fetch 和 axios 概要

1.1、ajax

ajax是最先再次出现推送后端允诺的控制技术，归属于原生植物 js 。ajax采用源代码，请点选《原生植物 ajax 允诺简述》查阅。通常采用以后，他们都须要把它PCB采用，就以 jQuery 的 ajax 为例。

PCB的 ajax 如下表所示：

PCB完成，开始采用的时候你会发现，body和header处理得有些乱，还有回调地狱的问题，所以他们再次出现了新的 fetch 允诺控制技术。

1.2、fetch

fetch 首先解决了回调地狱的问题，他返回的结果是一个 Promise 对象，对 Promise 不熟的可点选《Promise简述》。

fetch 采用如下表所示：

fetch(url,options).then(response=>{ // handle HTTP response },error=>{ // handle network error })

fetch 推送网络允诺时，可以传输任意数据格式，非常简便。但是 fetch 的超时、终止取消并不方便，只能通过取消 Promise 来完成，如果有多个 fetch 允诺时，更难处理。除此之外，fetch 是较为新的控制技术，低版本浏览器和IE浏览器支持性不好。了解更多 fetch 请点选《》。

1.3、axios

axios 功能非常强大，包括取消允诺，超时处理，进度处理等等。但它的本质还是 ajax，基于 Promise 进行PCB，既解决回调地狱问题，又能很好地支持各个浏览器。

axios采用代码如下表所示：

axios.post(/user, { firstName: Fred, lastName: Flintstone}) .then(function (response) { console.log(response); }) .catch(function (error){ console.log(error); });

更多了解 axios 请点选《》

二、ajax、fetch、axios的优劣

2.1、ajax 的优劣：

属 js 原生植物，基于XHR进行开发，XHR 结构不清晰。针对 mvc 编程，由于近来vue和React的兴起，不符合mvvm前端开发流程。单纯采用 ajax PCB，核心是采用 XMLHttpRequest 对象,采用较多并有先后顺序的话，容易产生回调地狱。

2.2、fetch 的优劣：

归属于原生植物 js，脱离了xhr ,号称可以替代 ajax控制技术。基于 Promise 对象设计的，可以解决回调地狱问题。提供了丰富的 API，采用结构简单。默认不带cooki

2.3、axios的优劣：

在浏览器中创建XMLHttpRequest允诺，在node.js中创建http允诺。解决回调地狱问题。自动转化为json统计数据类型。支持Promise控制技术，提供并发允诺接口。可以通过网络允诺检测进度。提供超时处理。浏览器兼容性良好。有拦截器，可以对允诺和响应统一处理。

一、ajax、fetch 和 axios 概要

二、ajax、fetch、axios的优劣

相关文章

微信