一、什么是前端网络请求？
在前端开发中，我们经常需要向服务器获取数据或提交数据，例如查询用户信息、提交登录表单、上传文件等。
AJAX、XHR、Fetch、Axios、Beacon 都与网络请求有关，但它们并不是五种完全独立的请求方式。
其中 AJAX 是一种技术思想，其他四个则是具体的 API 或工具。
二、AJAX：异步请求技术
AJAX（Asynchronous JavaScript and XML）是一种通过 JavaScript 异步与服务器交换数据，并在不刷新整个页面的情况下更新网页的技术。
例如，用户点击查询按钮，网页向服务器请求数据，获取结果后只更新列表，而不需要重新加载整个页面。
AJAX 本身不是具体的函数，也不是第三方库。
早期主要通过 XMLHttpRequest 实现，现在也可以通过 Fetch、Axios 等工具实现 AJAX 式交互。
三、XHR：传统原生请求 API
XMLHttpRequest（简称 XHR）是浏览器原生提供的 HTTP 请求 API，也是早期实现 AJAX 的主要方式。
const xhr = new XMLHttpRequest()
// 配置请求
xhr.open('GET', '/api/user')
// 注册响应处理函数
xhr.onload = () => {
console.log(xhr.responseText)
}
// 发送请求
xhr.send()执行过程：
-
new XMLHttpRequest()：创建请求对象。 -
open()：设置请求方法和地址。 -
onload：注册加载完成的回调函数。 -
send()：发送请求。
特点： 功能成熟，支持上传进度监听等能力，但传统写法基于事件回调，使用起来相对繁琐。
四、Fetch：现代原生请求 API
Fetch 是浏览器原生的 HTTP 请求 API，基于 Promise，支持 async/await。
async function getUser() {
const res = await fetch('/api/user')
if (!res.ok) {
throw new Error('请求失败')
}
const data = await res.json()
console.log(data)
}需要注意：
-
fetch()返回 Promise。 -
await等待请求响应。 -
res.json()将 JSON 响应体解析成 JS 数据。 -
res.ok用于判断 HTTP 状态码是否在 200～299 之间。
特点： 原生支持、无需安装第三方库、语法简洁。
缺点： HTTP 404、500 等响应默认不会让 Promise reject，需要手动判断状态码；请求拦截等功能通常需要自行封装。
五、Axios：第三方 HTTP 请求库
Axios 是一个基于 Promise 的第三方 HTTP 请求库，封装了常见的网络请求功能。
例如：
import axios from 'axios'
async function getUser() {
const res = await axios.get('/api/user')
console.log(res.data)
}与 Fetch 相比：
// Fetch
const res = await fetch('/api/user')
const data = await res.json()
// Axios
const res = await axios.get('/api/user')
const data = res.dataAxios 的主要优势：
-
自动处理常见 JSON 响应。
-
支持请求和响应拦截器。
-
方便统一配置
baseURL、超时时间等。 -
默认将非 2xx HTTP 响应视为错误。
-
支持取消请求、上传进度监听等功能。
特点： 封装完善，适合 React、Vue 等项目中的业务接口管理。
注意：Axios 并不是一种新的网络协议，它底层仍依赖运行环境提供的 HTTP 请求能力，例如 XHR 或 Fetch 适配器。
六、Beacon：轻量数据上报 API
Beacon API 主要用于向服务器异步发送少量数据，特别适合日志、埋点、性能监控等场景。
例如，用户离开页面时，需要向服务器上报访问数据。
const data = {
event: 'page_leave',
duration: 5000
}
const blob = new Blob(
[JSON.stringify(data)],
{ type: 'application/json' }
)
navigator.sendBeacon('/api/log', blob)与普通请求不同：
-
只支持 POST 请求。
-
不提供读取服务器响应内容的能力。
-
适合页面进入后台时发送少量数据。
-
浏览器会尽力在页面卸载后继续发送已排队的数据。
例如监听页面隐藏事件：
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'hidden') {
navigator.sendBeacon('/api/log', blob)
}
})注意： sendBeacon() 返回 true 仅代表数据成功加入发送队列，不代表服务器一定收到。
七、五者的核心区别
| 对比 | 本质 | 主要特点 | 适用场景 |
|---|---|---|---|
| AJAX | 异步交互技术 | 不刷新整个页面即可交换数据 | 异步交互思想 |
| XHR | 浏览器原生 API | 事件回调、支持进度监听 | 传统请求、上传进度 |
| Fetch | 浏览器原生 API | Promise、async/await | 现代普通 HTTP 请求 |
| Axios | 第三方请求库 | 自动 JSON 处理、拦截器、统一配置 | Vue、React 业务接口 |
| Beacon | 浏览器原生 API | POST、无需处理响应、适合后台发送 | 日志、埋点、监控上报 |
需要特别注意：AJAX 不是与 XHR、Fetch、Axios 平级的独立底层 API，而是一种异步请求和页面局部更新的技术思想。
八、面试背诵版
AJAX 是一种通过 JavaScript 异步与服务器交换数据、实现页面局部更新的技术思想。
XHR 是早期实现 AJAX 的主要原生 API，基于事件回调，功能成熟，但使用相对繁琐。
Fetch 是现代浏览器原生的请求 API，基于 Promise，支持 async/await，但需要手动解析响应体，并自行判断 HTTP 错误状态。
Axios 是第三方 HTTP 请求库，封装了自动 JSON 处理、请求和响应拦截器、超时控制、统一配置等功能，适合项目中的业务接口请求。
Beacon 是专门用于轻量数据上报的浏览器 API，通常用于日志、埋点和性能监控，支持在页面进入后台时安排发送数据，但无法获取响应内容。
一句话总结：AJAX 是思想，XHR 是传统原生实现，Fetch 是现代原生请求 API，Axios 是封装完善的第三方请求库，Beacon 则是专门用于轻量数据上报的 API。