一文详解fetch,ajax,axios的区别以及使用
作者：thinkQuadratic
在现代Web开发中,数据交互是必不可少的环节,这篇文章主要介绍了fetch,ajax,axios的区别以及使用的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
fetch,ajax,axios这些都是发起前端请求的工具，除了这些外还有jquery的$.ajax。ajax和$.ajax都是基于XMLHttpRequest。
介绍下XMLHttpRequest
XMLHttpRequest是一种在浏览器中用于与服务器进行异步通信的对象，它是实现 AJAX（Asynchronous JavaScript and XML，异步的 JavaScript 与 XML 技术）的核心。通过 XMLHttpRequest，可以在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。而jquery的$.ajax简化了XMLHttpRequest的使用。
区别
ajax：是最早用于实现异步数据交互的技术，出现时间较早。兼容性非常好，能在所有主流浏览器（包括一些较旧版本的浏览器）中使用。
fetch：是 ES6 引入的新的 API，现代浏览器基本都支持，但在一些旧版本浏览器中需要使用 polyfill 来实现兼容。
axios：是一个基于promise的 HTTP 客户端，用于浏览器和 Node.js。由于是第三方库，使用时需要引入，不过它通过内部处理兼容了不同浏览器，也能在 Node.js 环境使用。
使用
这里使用express框架创建一个简单的node服务，里面有一个接口，以便演示使用。
node后端
创建好项目文件夹后在cmd里面输入命令
npm i express
使用cors中间件来配置跨域，安装命令
npm install cors
app.js
// 引入 express 模块
const express = require('express');
// 引入 cors 模块
const cors = require('cors');
// 创建 express 应用实例
const app = express();
// 定义端口号
const port = 3000;
// 配置 cors 中间件，允许来自 8080 端口的跨域请求
const corsOptions = {
origin: 'http://localhost:8080',
};
app.use(cors(corsOptions));
// 定义一个 GET 请求的接口
app.get('/api/data', (req, res) => {
// 定义要返回的数据
const data = {
message: '接口的数据',
list: [1, 2, 3]
};
// 设置响应头，指定返回的数据格式为 JSON
res.setHeader('Content-Type', 'application/json');
// 发送 JSON 数据作为响应
res.send(JSON.stringify(data));
});
// 启动服务器，监听指定端口
app.listen(port, () => {
console.log(`服务器正在运行，访问地址为 http://localhost:${port}/api/data`);
});打开终端输入node app.js 启动，看到这个表示成功了，点击地址可以看到接口返回的数据
fetch
<template>
<div id="box">
<button @click="getDate">fetch</button>
</div>
</template>
<script>
export default {
name: "App",
methods: {
async getDate() {
const res = await fetch("http://localhost:3000/api/data");
console.log("res", res);
// 使用 res.json() 方法将响应体解析为 JSON 格式
const data = await res.json();
console.log("data", data);
},
},
};
</script>运行结果，打印可以看到已经拿到了接口的数据了，在浏览器网络中也可以看到请求已经成功了
ajax
<template>
<div id="box">
<button @click="getData2">ajax</button>
</div>
</template>
<script>
export default {
name: "App",
methods: {
getData2() {
const xhr = new XMLHttpRequest();
xhr.open("GET", "http://localhost:3000/api/data", true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
const res2 = JSON.parse(xhr.responseText);
console.log("res2", res2);
} else {
console.error("AJAX 请求出错，状态码：", xhr.status);
}
}
};
xhr.send();
},
},
};
</script>打印结果
axios
axios是第三方库，在使用前需要安装，命令
npm install axios
<template>
<div id="box">
<button @click="getData3">axios</button>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: "App",
methods: {
async getData3(){
const res3=await axios.get('http://localhost:3000/api/data');
console.log('res3',res3);
}
},
};
</script>打印结果
axios在实际开发中用的比较多，这里在演示下axios发put，post，delete请求。首先修改下后端代码，添加上put，post，delete接口。（修改完代码后记得重启下--在执行一次node app.js）
// 引入 express 模块
const express = require('express');
// 引入 cors 模块
const cors = require('cors');
// 创建 express 应用实例
const app = express();
// 定义端口号
const port = 3000;
// 配置 cors 中间件，允许来自 8080 端口的跨域请求
const corsOptions = {
origin: 'http://localhost:8080',
};
app.use(cors(corsOptions));
// 解析请求体中的 JSON 数据
app.use(express.json());
// 声明一个数据对象
let data = {
message: '接口的数据',
list: [1, 2, 3]
};
// 定义一个 GET 请求的接口，用于获取数据
app.get('/api/data', (req, res) => {
res.setHeader('Content-Type', 'application/json');
res.send(JSON.stringify(data));
});
// 定义一个 POST 请求的接口，用于新增数据
app.post('/api/data', (req, res) => {
const newData = req.body;
// 假设新增的数据是添加到 list 数组中
if (newData.value) {
data.list.push(newData.value);
}
const responseData = {
message: 'POST 请求处理成功，数据已新增',
currentData: data
};
res.setHeader('Content-Type', 'application/json');
res.send(JSON.stringify(responseData));
});
// 定义一个 PUT 请求的接口，用于更新数据
app.put('/api/data', (req, res) => {
const updatedData = req.body;
// 假设更新的数据是替换 list 数组
if (updatedData.list) {
data.list = updatedData.list;
}
const responseData = {
message: 'PUT 请求处理成功，数据已更新',
currentData: data
};
res.setHeader('Content-Type', 'application/json');
res.send(JSON.stringify(responseData));
});
// 定义一个 DELETE 请求的接口，用于删除数据
app.delete('/api/data', (req, res) => {
const deleteIndex = req.body.index;
if (deleteIndex!== undefined && deleteIndex >= 0 && deleteIndex < data.list.length) {
data.list.splice(deleteIndex, 1);
}
const responseData = {
message: 'DELETE 请求处理成功，数据已删除',
currentData: data
};
res.setHeader('Content-Type', 'application/json');
res.send(JSON.stringify(responseData));
});
// 启动服务器，监听指定端口
app.listen(port, () => {
console.log(`服务器正在运行，访问地址为 http://localhost:${port}/api/data`);
});前端代码
<template>
<div id="box">
<button @click="getData">获取数据</button>
<button @click="addData">新增数据</button>
<button @click="updateData">更新数据</button>
<button @click="deleteData">删除数据</button>
info：{{ info.message }} {{ info.list }}
</div>
</template>
<script>
import axios from 'axios';
export default {
name: "App",
data(){
return {
info:{},
}
},
methods: {
// 获取数据
async getData() {
try {
const response = await axios.get('http://localhost:3000/api/data');
this.info = response.data;
} catch (error) {
console.error('获取数据失败:', error);
}
},
// 新增数据
async addData() {
try {
const newData = { value: 4 };
await axios.post('http://localhost:3000/api/data', newData);
//调用获取数据接口来获取最新的数据，await 确保接口完成后在打印
//不加await可能会打印新增之前的旧值
await this.getData();
console.info('新增后',this.info );
} catch (error) {
console.error('新增数据失败:', error);
}
},
// 更新数据
async updateData() {
try {
const updatedData = { list: [5, 6, 7] };
await axios.put('http://localhost:3000/api/data', updatedData);
await this.getData();
console.info('更新后',this.info );
} catch (error) {
console.error('更新数据失败:', error);
}
},
// 删除数据
async deleteData() {
try {
const deleteIndex = 0;
await axios.delete('http://localhost:3000/api/data', {
data: { index: deleteIndex }
});
await this.getData();
console.info('删除后',this.info );
} catch (error) {
console.error('删除数据失败:', error);
}
}
},
};
</script>运行效果，从打印结果可以看到调用接口的时候数据发生了变化
end
到此这篇关于fetch,ajax,axios的区别以及使用的文章就介绍到这了,更多相关fetch,ajax,axios区别及使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！