HTML5的Fetch API有什么用？如何替代Ajax？
随着前端技术的不断演进，HTML5引入了许多强大的新特性，其中Fetch API无疑是网络请求领域的一项重要革新。长期以来，前端开发者一直依赖XMLHttpRequest（即我们常说的Ajax）来进行异步网络请求，但它的语法相对古老且基于事件回调，容易导致“回调地狱”。Fetch API的出现，正是为了解决这些痛点。本文将详细探讨Fetch API的作用，以及如何使用它来替代传统的Ajax。
一、 Fetch API有什么用？
Fetch API提供了一个获取资源的接口（包括跨网络通信），它的核心作用和优势体现在以下几个方面：
基于Promise设计：Fetch API原生基于Promise实现，告别了传统Ajax的嵌套回调，可以使用链式调用（.then()）或更加优雅的async/await语法来处理异步逻辑，极大地提升了代码的可读性和可维护性。
语法更加简洁：相比于XMLHttpRequest繁琐的实例化、状态监听和属性读取，Fetch只需一行代码即可发起请求，语义化更强。
模块化与标准化：Fetch将请求和响应标准化为了Request和Response对象，Headers对象也被独立出来，使得对请求头、响应头以及请求体的高级操作变得更加灵活和规范。
二、 Fetch与Ajax的写法对比
为了直观感受Fetch的便捷性，我们先来看一下传统Ajax和Fetch实现相同GET请求的代码对比。
传统Ajax写法：
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.ipipp.com/api/data', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(JSON.parse(xhr.responseText));
}
};
xhr.onerror = function() {
console.error('请求失败');
};
xhr.send();Fetch写法：
fetch('https://www.ipipp.com/api/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('请求失败', error));可以明显看出，Fetch的代码量大幅减少，且逻辑层次更加清晰，没有深层嵌套。
三、 如何使用Fetch替代Ajax？
在实际开发中，我们不仅需要GET请求，还需要POST请求、错误处理等。以下是Fetch替代Ajax的常见场景：
1. 发送POST请求
在Ajax中，发送POST请求需要设置请求头和调用send()方法传入请求体。在Fetch中，只需通过配置对象即可完成：
fetch('https://www.ipipp.com/api/update', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ name: '张三', age: 25 })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('错误:', error));2. 正确处理HTTP错误（重要差异）
使用Fetch替代Ajax时，最容易踩坑的就是错误处理。在传统Ajax中，只要状态码不是200，就会触发错误回调。但是Fetch只有在网络故障或请求被阻止时才会reject Promise，HTTP状态码为4xx或5xx时，Promise依然是resolved状态。
因此，我们需要手动检查Response对象的ok属性或status属性：
fetch('https://www.ipipp.com/api/notfound')
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json();
})
.then(data => console.log(data))
.catch(error => console.error('捕获错误:', error));3. 结合Async/Await（最佳实践）
将Fetch与ES2017的async/await语法结合，是目前最优雅的异步请求方案，代码看起来就像同步操作一样：
async function fetchData() {
try {
const response = await fetch('https://www.ipipp.com/api/data');
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
console.log(data);
} catch (error) {
console.error('请求出错:', error);
}
}
fetchData();四、 总结
Fetch API以其基于Promise的优雅设计、简洁的语法和强大的功能，已经成为现代前端开发中替代传统Ajax的首选方案。虽然它在错误处理机制上与传统的XMLHttpRequest有所不同（需要手动检查response.ok），但配合async/await语法，Fetch API能够提供更加清晰、可维护的异步代码结构。对于新项目，强烈建议全面使用Fetch API来处理网络请求，拥抱更加现代化的前端开发模式。