Fetch基于Promise语法更简洁，适合现代开发；Ajax兼容性好但代码冗长。两者在错误处理、配置灵活性上有差异，Fetch需手动判断响应状态，支持现代化配置，而Ajax需手动管理状态。新项目推荐Fetch或Axios，旧环境可选Ajax。
在前端开发中，发送网络请求是与服务器交互的核心操作。长期以来，Ajax（通常指通过 XMLHttpRequest 实现）是处理异步请求的主要方式。随着现代浏览器的发展，Fetch API 逐渐成为更推荐的选择。本文将从语法、使用方式、兼容性、错误处理等方面对比 Ajax 与 Fetch，帮助你理解两者的差异和适用场景。
语法简洁性与可读性
Fetch 的一大优势是基于 Promise，语法更加简洁清晰，尤其适合现代 JavaScript 开发。
- Ajax 使用 XMLHttpRequest，代码较为冗长，需手动管理状态和回调：
```javascript
const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(JSON.parse(xhr.responseText));
}
};
xhr.send();
```
- Fetch 使用链式调用或 async/await，结构更直观：
```javascript
fetch('/api/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(err => console.error(err));
```
立即学习“Java免费学习笔记（深入）”；
或者使用 async/await：
```javascript
const getData = async () => {
try {
const response = await fetch('/api/data');
const data = await response.json();
console.log(data);
} catch (err) {
console.error(err);
}
};
```
默认行为与错误处理
两者在错误处理上的逻辑有显著区别，容易引发误解。
- Ajax：当 HTTP 状态码为 4xx 或 5xx 时，不会自动触发错误回调，需要开发者手动判断 status 值。
- Fetch：只有在网络错误（如断网、DNS 失败）时才会 reject Promise；对于 404 或 500 等响应，fetch 仍认为请求“成功发送”，需手动检查 response.ok 或 status：
```javascript
fetch('/api/data')
.then(response => {
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
return response.json();
})
.then(data => console.log(data))
.catch(err => console.error(err));
```
请求配置与灵活性
两者都支持自定义请求头、方法、body 等，但 Fetch 的配置方式更现代化。
- 发送 POST 请求并携带 JSON 数据：
```javascript
// Fetch 配置清晰
fetch('/api/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ username: 'test', password: '123' }),
});
```
Ajax 也能实现，但需要手动设置请求头和序列化数据，代码更繁琐。
- Fetch 不支持超时控制，需自行封装 AbortController 实现：
```javascript
const controller = new AbortController();
setTimeout(() => controller.abort(), 5000); // 5秒超时
fetch('/api/data', { signal: controller.signal })
.then(...)
.catch(err => {
if (err.name === 'AbortError') console.log('请求超时');
});
```
兼容性与实际应用建议
虽然 Fetch 更现代，但在一些旧环境（如 IE）中不被支持。Ajax 兼容性更好，几乎可在所有浏览器运行。
- 新项目推荐使用 Fetch，尤其是配合 polyfill 或构建工具时。
- 若需支持 IE，可继续使用 Ajax，或引入
whatwg-fetchpolyfill。 - 对于复杂请求管理（如拦截、缓存），建议使用封装层如 Axios，它结合了两者优点。
基本上就这些。Fetch 是未来的方向，语法更干净，集成 Promise 更自然；而 Ajax 虽老，但原理重要，理解它有助于深入掌握网络请求机制。选择哪个，取决于你的项目需求和目标环境。
