在前端开发中，网络请求是连接客户端与服务端的核心桥梁。随着现代浏览器的发展，Fetch API 已成为替代传统 XMLHttpRequest 的主流方案。本文ZHANID工具网将系统讲解 Fetch 的使用方法，从基础语法到高级技巧，助你全面掌握这一工具。
一、Fetch 基础语法
1.1 基本 GET 请求
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(error => console.error('Error:', error));关键点解析：
返回 Promise 对象，天然支持异步操作
需手动检查
response.ok判断 HTTP 状态码使用
response.json()解析 JSON 响应体
1.2 发送 POST 请求
fetch('https://api.example.com/submit', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
username: 'john_doe',
password: 'secret123'
})
})
.then(response => response.json())
.then(data => console.log('Success:', data))
.catch(error => console.error('Error:', error));重要配置项：
method: 指定 HTTP 方法（GET/POST/PUT/DELETE 等）headers: 设置请求头（注意Content-Type需与body格式匹配）body: 请求体内容，支持多种格式（JSON/FormData/Blob 等）
二、响应处理进阶
2.1 响应对象方法
fetch(url)
.then(response => {
console.log('Status:', response.status); // HTTP 状态码
console.log('Headers:', response.headers.get('Content-Type')); // 获取响应头
console.log('Redirected:', response.redirected); // 是否重定向
// 根据内容类型选择解析方式
const contentType = response.headers.get('content-type');
if (contentType.includes('application/json')) {
return response.json();
}
return response.text();
});2.2 错误处理最佳实践
async function fetchData() {
try {
const response = await fetch(url);
// HTTP 错误处理
if (!response.ok) {
const errorMessage = await response.text();
throw new Error(`${response.status}: ${errorMessage}`);
}
const data = await response.json();
return data;
} catch (error) {
console.error('Fetch error:', error);
// 统一错误处理逻辑
showErrorNotification(error.message);
}
}三、高级功能实现
3.1 并发请求控制
// 使用 Promise.all 处理并发
Promise.all([
fetch('/api/users'),
fetch('/api/posts'),
fetch('/api/comments')
])
.then(responses => Promise.all(responses.map(r => r.json())))
.then(data => {
const [users, posts, comments] = data;
// 处理多个响应数据
});
// 使用竞态控制（race）
const timeoutId = setTimeout(() => {
throw new Error('Request timed out');
}, 5000);
Promise.race([
fetch(url),
new Promise((_, reject) =>
setTimeout(() => reject(new Error('Timeout')), 5000)
)
])
.finally(() => clearTimeout(timeoutId));3.2 文件上传
const formData = new FormData();
formData.append('avatar', fileInput.files[0]);
formData.append('userId', '12345');
fetch('/api/upload', {
method: 'POST',
body: formData,
// 无需设置 Content-Type，浏览器会自动设置 multipart/form-data
});3.3 请求取消
const controller = new AbortController();
const { signal } = controller;
fetch('/api/data', { signal })
.then(response => {
// 处理响应
})
.catch(err => {
if (err.name === 'AbortError') {
console.log('请求已取消');
}
});
// 取消请求（例如在组件卸载时）
controller.abort();
四、Fetch vs 传统方案对比
| 特性 | Fetch API | XMLHttpRequest |
|---|---|---|
| 语法风格 | Promise 链式调用 | 回调函数 |
| 默认携带 Cookie | 需显式设置 | 自动携带 |
| 进度监控 | 不支持 | 支持 onprogress |
| 超时控制 | 需手动实现 | 支持 timeout 属性 |
| 浏览器兼容性 | IE11+ 需 polyfill | 所有浏览器 |
兼容性处理方案：
// 使用 polyfill 支持旧浏览器
import 'whatwg-fetch';
// 或通过条件加载
if (!window.fetch) {
require('whatwg-fetch').polyfill();
}五、最佳实践建议
始终验证响应状态
Fetch 不会自动拒绝非 2xx 状态码，需手动检查response.ok合理设置请求头
// 常见安全头设置 headers: { 'X-Requested-With': 'XMLHttpRequest', 'Cache-Control': 'no-cache' }大文件分片上传
const chunkSize = 1024 * 1024; // 1MB let start = 0; async function uploadChunk() { const chunk = file.slice(start, start + chunkSize); const formData = new FormData(); formData.append('chunk', chunk); formData.append('start', start); const res = await fetch('/upload', { method: 'POST', body: formData }); start += chunkSize; if (start < file.size) { uploadChunk(); } }使用 AbortController 取消请求
在单页应用路由切换时及时取消进行中的请求服务端缓存策略
通过Cache-Control头控制缓存行为：fetch(url, { cache: 'force-cache' }); // 强制使用缓存 fetch(url, { cache: 'reload' }); // 跳过缓存重新请求
六、调试技巧
Chrome DevTools 使用
Network 标签页查看请求详情
Copy as Fetch 生成代码片段
模拟慢速网络环境测试
拦截与模拟请求
// 使用 Service Worker 拦截请求 self.addEventListener('fetch', event => { if (event.request.url.includes('/api/data')) { event.respondWith( new Response(JSON.stringify({ mockData: true })) ); } });日志记录中间件
const logMiddleware = async (url, options) => { console.log(`[FETCH] ${options.method} ${url}`); const response = await fetch(url, options); console.log(`[RESPONSE] ${response.status} ${url}`); return response; }; // 使用示例 logMiddleware('/api/data', { method: 'GET' }) .then(response => response.json()) .then(console.log);
七、总结
Fetch API 通过现代化的 Promise 接口和更简洁的 API 设计，极大简化了前端网络请求的实现。掌握以下核心要点：
基础三件套：
method/headers/body配置响应处理流程：状态验证 → 内容解析
高级功能：并发控制、请求取消、文件上传
错误处理机制：HTTP 错误与网络错误的区分处理
性能优化：缓存策略、分片上传、请求取消
随着浏览器标准的演进，Fetch 正在持续完善功能（如新增的 keepalive 属性）。建议在实际项目中逐步迁移至 Fetch，对于需要兼容旧浏览器的场景，可结合 axios 等库使用，或在构建流程中加入 polyfill。
本文由@战地网 原创发布。
该文章观点仅代表作者本人，不代表本站立场。本站不承担相关法律责任。
如若转载，请注明出处：https://www.zhanid.com/biancheng/4540.html
