当前位置：首页 > 文章列表 > 文章 > 前端 > Ajax与Fetch区别详解

Ajax与Fetch区别详解

2026-02-07 09:46:04 0浏览收藏

大家好，今天本人给大家带来文章《Ajax与Fetch网络请求对比解析》，文中内容主要涉及到，如果你对文章方面的知识点感兴趣，那就请各位朋友继续看下去吧~希望能真正帮到你们，谢谢！

Fetch基于Promise语法更简洁，适合现代开发；Ajax兼容性好但代码冗长。两者在错误处理、配置灵活性上有差异，Fetch需手动判断响应状态，支持现代化配置，而Ajax需手动管理状态。新项目推荐Fetch或Axios，旧环境可选Ajax。

JavaScript网络请求_Ajax与Fetch对比

在前端开发中，发送网络请求是与服务器交互的核心操作。长期以来，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));
```

或者使用 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('请求超时');
});
```