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’
上一篇:[CTF]思维导向图


下一篇:【大众点评】—— 首页开发