ajax和fetch区别,ajax、axios和fetch的区别

ajax

$.ajax({

type: 'POST',

url: url,

data: data,

dataType: dataType,

success: function () {},

error: function () {}

});

它依赖的是现有的CSS/HTML/Javascript，其中最核心的依赖是浏览器提供的XMLHttpRequest对象。这个对象为向服务器发送请求和解析服务器响应提供了流畅的接口，使得页面可以使用这个对象发出HTTP请求与接收HTTP响应，这样就可以动态的获取数据，实现在页面不刷新的情况下和服务端进行数据交互。

ajxs的优点：

1. 减少冗余请求和响应对服务造成的负担。

2. 无刷新更新页面,带来更好的用户体验。

3. 减轻服务器速写的负担，节约空间和宽带租用成本。

4. 采用异步提交,读写速度更快。

ajax的缺点：

1. AJAX大量的使用了javascript和ajax引擎,这些取决于浏览器的支持.在编写的时候考虑对浏览器的兼容性。

2. AJAX只是局部刷新,所以页面的后退按钮是没有用的.

3. 对流媒体还有移动设备的支持不是太好等。

axios

axios({

method: 'post',

url: '/user/12345',

data: {

firstName: 'Fred',

lastName: 'Flintstone'

}

})

.then(function (response) {

console.log(response);

})

.catch(function (error) {

console.log(error);

});

Vue2.0之后，尤雨溪推荐大家用axios替换JQuery ajax，想必让axios进入了很多人的目光中。

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，它本身具有以下特征：

从浏览器中创建 XMLHttpRequest

支持 Promise API

客户端支持防止CSRF

提供了一些并发请求的接口(重要，方便了很多的操作)

从 node.js 创建 http 请求

拦截请求和响应

转换请求和响应数据

取消请求

自动转换JSON数据

fetch

try {

let response = await fetch(url);

let data = response.json();

console.log(data);

} catch(e) {

console.log("Oops, error", e);

}

fetch号称是AJAX的替代品，是在ES6出现的，使用了ES6中的promise对象。Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多了，参数有点像jQuery ajax。但是，一定记住fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。

fetch的优点：

语法简单，更加语义化

基于标准的Promises实现，支持async/await

标签：axios,浏览器,请求,ajax,data,fetch

来源： https://blog.csdn.net/C_Chenshao/article/details/104684181