axios,fetch,ajax区别

Jquery中的ajax

1 $.ajax({ 2 type:"get", 3 url:"", 4 async:true, 5 data:{}, 6 dataType:"", 7 success:function(){ 8 } 9 });

type 以什么样的方式获取数据，是get或post
url 必填项，规定把请求发送到哪一个 URL。
axync true/false，默认是tue异步请求，false同步。异步请求$.ajax执行后，才会继续执行ajax后面的脚本，服务器返回数据以后，才会触发success的成功回调，即单个线程。同步请求：全部的请求都为同步。
data 可选。像服务器发送请求时一块儿过去的参数。通常是post请求时携带的用户名或者id。
dataType 可选。规定预期的服务器响应的数据类型。
默认执行智能判断（xml、json、script 或 html）。

success 可选。执行成功时返回的数据。
 

 

  

 优缺点：

是基于XHR原生开发的，目前已有的fetch可替代。自己是针对mvc的编程模式，不太适合目前mvvm的编程模式。jQuery自己比较大，若是单纯的使用ajax能够本身封装一个，否则会影响性能体验。

 axios解析

axios({
method: 'post',
url: '',
data: {}
})
.then(function (data) {
console.log(data);
}
特色：

从浏览器中创XMLHttpRequest请求。

node.js中建立http请求。

自动转换为json数据类型

支持promise API ，提供了一些并发请求的接口。

是vue全家桶技术之一，在vue中须要使用npm install axios --save-dev来安装依赖。

fetch解析

try {
let response = await fetch(url);
let data = response.json();
console.log(data);
} catch(e) {
console.log("Oops, error", e);
特色

脱离了xhr。

是es规范里新的实现方式。

更加底层，提供了丰富的API。

.fetch没有办法原生监测请求的进度，而XHR能够。

 总结
ajax是最先出现发送后端请求的技术，属于原生js范畴,核心是使用XMLHttpRequest对象,使用较多并有前后顺序的话，容易产生回调地狱。

fetch号称能够代替ajax的技术，是基于es6中的Promise对象设计的，参数和jQuery中的ajax相似，它并非对ajax进一步封装，它属于原生js范畴。没有使用XMLHttpRequest对象。

axios不是原生js,使用时须要对其进行安装，客户端和服务器端均可以使用，能够在请求和相应阶段进行拦截，基于promise对象。