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可以