fetch 是现代前端推荐的网络请求方式，基于 Promise 提供简洁语法和清晰逻辑，支持 GET/POST 请求及多种响应格式解析，相比 XMLHttpRequest 更易读且便于使用 async/await，需手动处理 HTTP 错误状态，结合 AbortController 可实现超时控制，通过 polyfill 兼容旧浏览器。
在现代前端开发中，fetch 已成为替代传统 XMLHttpRequest 的首选方式。它基于 Promise，语法更简洁，逻辑更清晰，尤其适合处理异步数据请求。
fetch 的基本用法
fetch 提供了一个全局方法用于发起网络请求，默认使用 GET 方法：
fetch('/api/data')
.then(response => {
if (!response.ok) {
throw new Error('网络响应异常');
}
return response.json();
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error('请求失败:', error);
});
相比 XMLHttpRequest 冗长的事件监听和状态判断，fetch 更直观，代码更易读。
发送 POST 请求
使用 fetch 发送携带数据的 POST 请求也很简单：
立即学习“前端免费学习笔记（深入）”；
fetch('/api/submit', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ name: '张三', age: 25 })
})
.then(response => response.json())
.then(result => {
console.log('成功:', result);
})
.catch(error => {
console.error('错误:', error);
});
配置项清晰明了，无需手动设置请求头或监听状态变化。
处理响应类型
fetch 支持多种响应格式解析：
- response.json()：解析为 JSON 对象
- response.text()：获取纯文本
- response.blob()：处理文件或图片等二进制数据
注意：fetch 只在网络错误时 reject Promise，HTTP 状态码如 404 或 500 不会自动触发 catch，需手动检查 response.ok。
与 XMLHttpRequest 的对比优势
fetch 的优势体现在：
- 语法更简洁，减少模板代码
- 原生支持 Promise，便于使用 async/await
- 模块化设计，易于扩展（结合 AbortController 可实现超时控制）
- 更好的语义化 API
虽然老版本浏览器可能不支持，但通过 polyfill 可以兼容大多数环境。
基本上就这些。fetch 让异步请求变得更现代、更高效，是 HTML5 时代推荐的数据获取方式。
