Ajax、Fetch、Axios

计算机软件开发 · 2024-9-20 08:54:11

这些名词的共同点：都用于发送网络哀求。
1.Ajax

它的全称是：Asynchronous JavaScript And XML，翻译过来就是“异步的 Javascript 和 XML”。
很多小同伴大概会误以为 Ajax 是发哀求的一种方式，大概把 XMLHttpRequest 与 Ajax 划等号，着实这是错误和片面的。
正解：

Ajax 是一个技能统称，是一个概念模型，它席卷了很多技能，并不特指某一技能，它很告急的特性之一就是让页面实现局部革新。

特点：

局部革新页面，无需重载整个页面。

简朴来说，Ajax 是一种头脑，XMLHttpRequest 只是实现 Ajax 的一种方式。此中 XMLHttpRequest 模块就是实现 Ajax 的一种很好的方式，这也是很多口试官喜欢让口试者手撕的代码之一。
使用 XMLHttpRequest 模块实现 Ajax。
示例代码：
<body> <script> function ajax(url) { const xhr = new XMLHttpRequest(); xhr.open("get", url, false); xhr.onreadystatechange = function () { // 异步回调函数 if (xhr.readyState === 4) { if (xhr.status === 200) { console.info("相应结果", xhr.response) } } } xhr.send(null); } ajax('https://smallpig.site/api/category/getCategory') </script></body>复制代码输出结果：
这里使用 XMLHttpRequest 模块实现了一个最简朴的 get 网络哀求。
留意： 我们使用这种方式实现网络哀求时，如果哀求内部又包罗哀求，以此循环，就会出现回调地狱，这也是一个诟病，厥后才催生了更加优雅的哀求方式。
2.Fetch

Fetch 是在 ES6 出现的，它使用了 ES6 提出的 promise 对象。它是 XMLHttpRequest 的替换品。
很多小同伴会把它与 Ajax 作比较，着实这是不对的，我们通常所说的 Ajax 是教唆用 XMLHttpRequest 实现的 Ajax，以是真正应该和 XMLHttpRequest 作比较。
正解：

Fetch 是一个 API，它是真实存在的，它是基于 promise 的。

特点：

使用 promise，不使用回调函数。
接纳模块化计划，好比 rep、res 等对象分散开来，比较友好。
通过数据流对象处理处罚数据，可以进步网站性能。

以是这里就和 Ajax 又很大差异了，一个是头脑，一个是真实存在的 API，不外它们都是用来给网络哀求服务的，我们一起来看看使用 Fetch 实现网络哀求。
示例代码：
<body> <script> function ajaxFetch(url) { fetch(url).then(res => res.json()).then(data => { console.info(data) }) } ajaxFetch('https://smallpig.site/api/category/getCategory') </script></body>复制代码输出结果：
上段代码使用 Fetch 发送了一个最简朴的 get 哀求，此中最告急的特点之一就是接纳了.then 链式调用的方式处理处罚结果，如许不仅利于代码的可读，而且也办理了回调地狱的题目。
3.Axios

Axios 是随着 Vue 的鼓起而被广泛使用的，现在来说，绝大多数的 Vue 项目中的网络哀求都是使用 Axios 发起的。固然它并不是一个头脑，大概一个原生 API，它是一个封装库。
正解：

Axios 是一个基于 promise 封装的网络哀求库，它是基于 XHR 举行二次封装。

特点：

从欣赏器中创建 XMLHttpRequests
从 node.js 创建 http 哀求
支持 Promise API
拦截哀求和相应
转换哀求数据和相应数据
取消哀求
自动转换 JSON 数据
客户端支持防御 XSRF

以是说，Axios 可以说是 XHR 的一个子集，而 XHR 又是 Ajax 的一个子集。既然说它是一个库，那么我们在使用的时间就必要引入它。
示例代码：
// 发送 POST 哀求axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' }})复制代码总结

Ajax、Fetch、axios三者之间的关系可以用一张图来清晰的表现，如图：

三者做个对比：
网络哀求特点Ajax一种技能统称，主要使用XHR实现网络哀求Fetch详细API，基于promise，实现网络哀求Axios一个封装库，基于XHR封装，较为推荐使用

Ajax、Fetch、Axios

浏览过的版块

所属分类: 问答交流

新帖推荐: 30日

推荐作品