这些名词的共同点：都用于发送网络哀求。
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封装，较为推荐使用 |
