ajax、axios、fetch区别
文章类型:Javascript
发布者:hp
发布时间:2023-04-06
ajax 是一种技术统称,fetch 一个原生API,axios 一个第三方库
一:ajax
$.ajax({
type: 'POST',
url: url,
data: data,
dataType: dataType,
success: function () {},
error: function () {}
});
优缺点:
1:本身是针对MVC的编程,不符合现在前端MVVM的浪潮
2:基于原生的XHR开发,XHR本身的架构不清晰,已经有了fetch的替代方案
3:JQuery整个项目太大,单纯使用ajax却要引入整个JQuery非常的不合理(采取个性化打包的方案又不能享受CDN服务)
二:axios
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
优缺点:
1:从浏览器中创建 XMLHttpRequest
2:从 node.js 发出 http 请求
3:支持 Promise API
4:拦截请求和响应
5:转换请求和响应数据
6:取消请求
7:自动转换JSON数据
8:客户端支持防止CSRF/XSRF
三:fetch
try {
let response = await fetch(url);
let data = response.json();
console.log(data);
} catch(e) {
console.log("Oops, error", e);
}
优缺点:
1:fetcht只对网络请求报错,对400,500都当做成功的请求,需要封装去处理
2:fetch默认不会带cookie,需要添加配置项
3:fetch不支持abort,不支持超时控制,使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行,造成了量的浪费
4:fetch没有办法原生监测请求的进度,而XHR可以