ajax、fetch、axios区别

Jquery中的ajax

	$.ajax({
			type:"get",
			url:"",
			async:true,
			data:{},
			dataType:"",
			success:function(){
			}
		});

 

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对象。