Ajax介绍
Ajax是XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，早期的项目，我们只能通过它向服务器端请求数据，包括Jquery封装的Ajax请求库也是基于它的封装
我们来看一下基于XMLHttpRequest对象去做一个Ajax请求的事例
// 通过XMLHttpRequest初始化一个Ajax请求实例
const xhr = new XMLHttpRequest();
// 设置超时时间,0表示永不超时
xhr.timeout = 0;
// 初始化请求，这个方法不会发送请求给服务器端
// 第一个参数是请求的方法，例如GET、POST
// 第二个参数，服务端请求的url
// 第三个参数，请求是否是异步，默认为true异步
xhr.open('POST', '/api/url', true);
// 请求需要传送的数据
const formData = new FormData();
formData.append("username", "XXX");
formData.append("age", 18);
// 请求发起
xhr.send(formData);
// 监听请求结果
// 拿到服务器返回的数据
xhr.onreadystatechange = function () {
// 当readyState为4并且xhr.status为200时
// 拿到了正常返回的数据
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText);
} else {
// 服务器返回了异常数据
alert(xhr.statusText);
}
};从上面的事例可以看出来，我们要想请求数据，需要先new XMLHttpRequest实例出来，然后再通过兼听函数的方式来拿到服务器返回的数据
Fetch介绍
Fetch是window对象提供的一个方法，用于实现基于promise的http请求，它的出现是用来取代最早的XMLHttpRequest实现的ajax请求
同样的我们先来看一下Fetch请求的实例
// 请求的数据
const data = {
username: "xxx",
age: 18,
};
// 第一个参数是请求的url
// 第二个参数是一个对象
// 可以设置请求方式，请求数据、请求超时
// 还有请求头等
fetch("/api/url", {
// 请求方式
method: "POST",
// 请求数据通过body传递
body: JSON.stringify(data),
}).then((response) => {
// 正常服务返回的数据通过then拿到
console.log(response);
}).catch((error) => {
// 异常返回在catch里处理
console.log(error);
});从上面的事例可以看出来，我们要想请求数据，直接使用fetch这样的全局对象就行，然后再通过Promise的方式来拿到服务器返回的数据
Axios介绍
Axios并不是原生Js提供的方法，它是一个基于XMLHttpRequest封装的Ajax请求库，并且把服务器返回的数据通过Promise的方式返回
还是老规矩，我们通过一个事例来看看Axios是怎么请求数据的
// 首先通过npm安装axios
npm i -S axios
// 通过import的方式在项目中引入axios
import axios from 'axios'
// 我们可以看到参数是一个对象
// 里面可以设置请求方式、请求数据
// 还有请求头等
axios({
method: "POST",
url: "/api/url",
data: {
username: "xxx",
age: 18,
},
}).then((response) => {
// 正常服务返回的数据通过then拿到
console.log(response);
}).catch((error) => {
// 异常返回在catch里处理
console.log(error);
});从上面的事例可以看出来，我们要想请求数据，使用方式基本上和Fetch保持一致，但是它的底层确是基于XMLHttpRequest实现的
对比
几种方式的对比
ajax:
优点：局部更新，原生支持
缺点：可能破坏浏览器后退功能，嵌套回调
jqueryAjax:
在原生ajax的基础上进行封装，支持jsonp
fetch:
优点：解决回调地狱
缺点：APIA偏低层，需要封装，默认不带cookie，需要手动添加；浏览器支持情况不是很友好，需要第三方polyfill
axios的特点：
支持浏览器和node.js
支持promise
能拦截请求和响应
能转换请求和相应数据
能取消请求
自动转换json数据
浏览器端支持防止CSRF(跨站请求伪造)
总结
我们在实际项目中一般使用axios，因为它是一个成熟的ajax请求库，帮我们封装了很多实用的方法来向服务器请求数据
好了开发中，常用的服务器数据请求就讲到这了
到此这篇关于数据请求中Ajax、Fetch及Axios区别的文章就介绍到这了,更多相关Ajax、Fetch及Axios区别内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！