Jquery ajax 、axios、Fetch 区别

1. Jquery ajax

 $.ajax({
	type:'POST',
	url:url,
	data:data,
	success:function(){},
	error:function(){}
})

Jquery ajax是对原生XHR的封装，此外还增添了对Jsonp的支持。

缺点：

• 针对MVC，不适合MVVM
• Jquery整个项目太大，就只为引入ajax引入jquery很不合理

2 axios

axios是Promise 实现对ajax的封装，就像Jquery对ajax的封装一样
axios是ajax, ajax不止axios

axios({
	method:'post',
	url:url,
	data:data,
})
.then(function(response){
	console.log(reponse)
})
.catch(function(error){
	console.log(error)
})

特性：

• 从node.js创建http请求
• 支持Promise API
• 客户端支持防止CSRF攻击（就是让每次请求都从cookie中携带一个key）
• 提供了一些并发请求的接口

3 Fetch

try{
 let response = await fetch(url)
 let data = response.json()
}
catch(e){
console.log(e)
}

缺点：

• fetch只对网络请求报错，对400,500都认为是成功，需要封装去处理
• fetch 默认不带cookie ，需要添加配置项
• fetch 不支持abort， 不支持超时控制，使用setTimeout 和 Promise.reject实现的超时控制并不能阻止请求过程中在后台的继续运行，造成资源浪费
• fetch 不能原生监测请求进度，而XHR可以
• 但是他有个可以控制跨域的办法，通过配置项 mode:‘no-cors’