一文详解fetch,ajax,axios的区别以及使用_javascript技巧

fetch,ajax,axios这些都是发起前端请求的工具，除了这些外还有jquery的$.ajax。ajax和$.ajax都是基于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服务，里面有一个接口，以便演示使用。

创建好项目文件夹后在cmd里面输入命令

npm i express

使用cors中间件来配置跨域，安装命令

// 引入 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 启动，看到这个表示成功了，点击地址可以看到接口返回的数据

运行结果，打印可以看到已经拿到了接口的数据了，在浏览器网络中也可以看到请求已经成功了

axios是第三方库，在使用前需要安装，命令

 axios在实际开发中用的比较多，这里在演示下axios发put，post，delete请求。首先修改下后端代码，添加上put，post，delete接口。（修改完代码后记得重启下--在执行一次node app.js）

运行效果，从打印结果可以看到调用接口的时候数据发生了变化

到此这篇关于fetch,ajax,axios的区别以及使用的文章就介绍到这了,更多相关fetch,ajax,axios区别及使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

上一篇：创建React项目的三个方式小结React

下一篇：JavaScript 中closest 方法使用示例详解j