JavaScript网络请求_Ajax与Fetch对比-js教程-PHP中文网

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));
```

Expanso json-flatten

通过 CLI 或 MCP 服务器，使用 Expanso Edge 管道扁平化嵌套 JSON 对象。

下载

请求配置与灵活性

两者都支持自定义请求头、方法、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('请求超时');
});
```