一篇文章带你了解Ajax、Fetch和Axios

什么是Ajax

Ajax（Asynchronous JavaScript And XML），实际上就是异步的JavaScript和XML，Ajax是一种概念，指无需刷新页面即可与服务器通信的技术。

记住：Ajax是一个技术统称，包含了很多技术，不是特指某一种技术，也不是发送请求的一种方式。XMLHttpRequest 是实现Ajax的一种方式。

异步JavaScript

可以异步地向服务器端发送请求，在等待响应的过程中，不会阻塞当前页面。浏览器还可以做自己的事情，直到成功获取响应后，浏览器才开始处理响应数据。

XML

只是一种前后端传输数据的格式，现在主要用JSON。

应用场景

Ajax通常用于创建快速响应的Web程序，例如：

动态更新内容：比如在微博中，用户发布新评论可以实时更新到页面上，不需要刷新整个页面。
自动完成功能：利用百度搜索引擎时，Ajax可以根据用户输入的内容，及时向服务器发送请求并返回匹配的结果列表，提供反馈。
分页和无限滚动：在展示博客文章等内容时，Ajax可以在用户滚动到底部时自动加载更多内容，或点击分页按钮来加载特定数据块，而不是一次性加载。

实现Ajax

我们来看一组代码：


json
代码解读
复制代码
//test.josn的代码
{
    "reply":"我收到啦！"
}


ini
代码解读
复制代码
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
   if (xhr.readyState !== 4) return;
   if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
       console.log(xhr.responseText);
    }
};
xhr.open('GET', 'text.json', true);
xhr.send(null);

执行结果如下：

这里有一点需要注意：JSON文件中的对象键名一定要用双引号包裹，如果属性值里有字符串，也需要用双引号包裹。

执行过程

1.创建xhr对象


ini
代码解读
复制代码
const xhr = new XMLHttpRequest();

2.利用onreadystatechange属性，封装一个函数，来监听readyState的变化


ini
代码解读
复制代码
xhr.onreadystatechange = () => {
if (xhr.readyState !== 4) return;
if (xhr.status >= 200 && xhr.status < 300 ){
    console.log(xhr.responseText);
    }
};

2.1当xhr对象执行发送数据时，有五种状态：

2.2判断Http状态码


lua
代码解读
复制代码
if (xhr.status >= 200 && xhr.status < 300 ){
    console.log(xhr.responseText);
    }

Ajax的状态码为4是不够的，这只能表示收到了服务器端所有的响应的数据，但不能保证这个数据是正确的。

所以还需要判断Http的状态码，确保xhr对象的statue属性值在200~300之间。

3.准备发送请求


kotlin
代码解读
复制代码
xhr.open('GET','text.json',ture);

第一个参数是请求方式：method（“GET”或“POST”）；第二个参数是：url（文件在服务器上的位置）；第三个参数是：async（true：异步，false：同步）。

4.发送请求


csharp
代码解读
复制代码
xhr.send(null)

注意：send（）的参数是通过请求体携带的数据，而GET请求是通过请求头携带数据的，所以要把send（）参数设置为null。

Fetch

Fetch 出现在ES6，使用了ES6中的promise对象。是XMLHttpRequest的替代品。

大多数时候我们会将Ajax和Fetch放在一起比较，实际上比的是Ajax中的XMLHttpRequest和Fetch。

注意：Fetch是一个API，是基于Promise真实存在的。

Fetch的特点

基于Promise：Fetch会返回一个Promsie对象，使得异步操作更加简洁和理解。还可以通过链式调用.then()和.catch()，可以更加清晰处理响应和错误。
简洁的API：Fetch有一套简洁的方法来执行HTTP请求。
支持跨域请求：Fetch默认支持跨域请求，但需要在服务器端配置CORS（跨域资源共享）。通过设置credentials属性，还可以在跨域请求中发送cookies。
支持流式输出：Fetch支持流式输出，让大型响应或请求时更高效。

发送请求

Fetch 发送请求和Ajax相比较为简单，来看个POST请求：


javascript
代码解读
复制代码
fetch('https://example.com/api/data', {
  method: 'POST', // 请求方法
  headers: {
    'Content-Type': 'application/json' // 指定发送的数据格式
  },
  body: JSON.stringify({ // 将 JavaScript 对象转换为 JSON 字符串
    name: 'Kimi',
    age: 25
  })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(err => console.error('Fetch error:', err));

以上代码就是向特定的端点发送包含用户信息的POST请求，设定了请求头和请求体来明确信息。

Axios

Axios是一个随着Vue兴起而被广泛使用的，Vue大多数项目中都是利用Axios来发起请求的。

注意：Axios不是一个思想，也不是一个技术。而是一个基于Promise封装的网络请求库，是基于XMLHttpRequest进行二次封装。

那有没有想过，为什么Axios是基于XMLHttpRequest的而不是Fetch？

原因有以下几点：

历史性：在Axios首次开发时，Fetch还没有被一个普遍使用，因为它是随着ES6诞生的。而XMLHttpRequest已经使用多年，几乎所有浏览器都支持。
自动转换JSON数据：Axios可以自动将传入传出的数据转换成JSON格式，但早期的Fetch需要手动转换。
请求和响应拦截器：Axios允许在请求发送前或响应被处理之前对其进行修改或干预，这有利于添加通用认证令牌。Fetch本身不支持这种功能。

从Axios官网我们可以了解到Axios有以下特点：

从浏览器创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
超时处理
查询参数序列化支持嵌套项处理
自动将请求体序列化为：
- JSON (application/json)
- Multipart / FormData (multipart/form-data)
- URL encoded form (application/x-www-form-urlencoded)
将 HTML Form 转换成 JSON 进行请求
自动转换JSON数据
获取浏览器和 node.js 的请求进度，并提供额外的信息（速度、剩余时间）
为 node.js 设置带宽限制
兼容符合规范的 FormData 和 Blob（包括 node.js）
客户端支持防御XSRF 所以，Axios是XHR的一个子集，而XHR又是Ajax的一个子集。我们在一开始就说过Axios是一个库，所以需要在使用时引入。

看个POST请求：


javascript
代码解读
复制代码
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

总结

网络请求	特点
Ajax	一种技术统称，主要利用XHR实现网络请求
Fetch	具体API，基于promise，实现网络请求
Axios	一个封装库，基于XHR封装，推荐使用