告别传统 Ajax：掌握 fetch API 的简洁与强大
早期我们依赖 XMLHttpRequest（即 Ajax）来实现客户端与服务器的数据交换。然而，随着 Web 技术的发展，浏览器提供了更加优雅、简洁的方案——fetch API。
一、传统 Ajax 的繁琐
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
console.log(response);
} else {
console.error('请求失败，状态码：', xhr.status);
}
}
};
xhr.onerror = function() {
console.error('请求出错');
};
xhr.send();
问题：
- 代码冗长，逻辑复杂
- 需要处理多种状态码和事件
- 可读性差，维护成本高
二、fetch API 的简洁之美
使用 fetch API，可以轻松完成同样的请求：
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
return response.json();
})
.then(data => console.log(data))
.catch(err => console.error('请求失败', err));
更现代的写法，结合 async/await：
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
const data = await response.json();
console.log(data);
} catch (err) {
console.error('请求失败', err);
}
}
fetchData();
逻辑清晰、代码量减少一半以上，异步代码更像同步代码。
三、fetch API 的主要特点
1. 基于 Promise
- 可使用
.then()/.catch()链式调用 - 与 async/await 配合，异步代码更优雅
2. 简单的请求配置
fetch('https://api.example.com/data', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: '张三', age: 28 })
});
3. 灵活的响应处理
fetch 返回一个 Response 对象，可调用多种方法：
| 方法 | 用途 |
|---|---|
response.json() | 解析为 JSON |
response.text() | 解析为文本 |
response.blob() | 解析为 Blob |
response.arrayBuffer() | 解析为 ArrayBuffer |
response.formData() | 解析为 FormData |
4. 支持请求中断
使用 AbortController：
const controller = new AbortController();
const signal = controller.signal;
fetch('https://api.example.com/data', { signal })
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.error(err));
// 中断请求
controller.abort();
5. 原生支持 CORS
- 跨域请求无需额外封装
- 与现代前端框架完美兼容
四、fetch API 注意事项
- Cookies 默认不发送
fetch('https://api.example.com/data', { credentials: 'include' });
- 不会自动拒绝 4xx/5xx 响应
- 需要手动检查
response.ok或response.status
- 不支持直接设置超时
- 可结合
AbortController+setTimeout实现
五、总结
fetch API 以 简洁、灵活、现代化 的方式替代传统 Ajax：
- 代码量更少，逻辑更清晰
- 支持各种响应类型和中断操作
- 与 Promise / async-await 无缝结合
在现代 Web 开发中，fetch API 已成为首选的网络请求方案，彻底告别繁琐的 Ajax 时代。