Fetch API是现代浏览器推荐的HTTP请求方式，基于Promise提供简洁异步处理。通过fetch()发送GET/POST请求，支持自定义方法、头部（如Content-Type、Authorization）、请求体等。示例包含获取JSON数据、提交表单、添加认证Token及使用async/await优化流程。最佳实践包括检查response.ok、捕获异常、正确设置头部、避免硬编码敏感信息、结合AbortController实现超时控制，文件上传时使用FormData并由浏览器自动设置边界。Fetch API配合现代JS语法成为前端网络请求首选方案。
HTML5本身并不直接提供网络请求功能，但现代浏览器在HTML5时代广泛支持了Fetch API，成为进行HTTP请求的推荐方式。相比传统的XMLHttpRequest，Fetch API更简洁、更强大，基于Promise设计，便于处理异步操作。
使用Fetch API发起基本请求
Fetch API通过全局的fetch()函数发送网络请求，默认使用GET方法。
示例如下：
fetch('/api/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('Fetch error:', error));
上述代码获取JSON数据，并对响应状态进行检查，确保请求成功。
立即学习“前端免费学习笔记（深入）”；
发送带选项的POST请求
向服务器提交数据时，通常使用POST方法，并设置请求头和请求体。
示例：发送JSON数据
fetch('/api/submit', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ name: 'Alice', age: 25 })
})
.then(response => response.json())
.then(data => console.log('Success:', data))
.catch(error => console.error('Error:', error));
注意：Content-Type应与实际发送的数据格式一致，常见类型包括application/json、multipart/form-data等。
处理认证与自定义头部
许多API需要身份验证，如Bearer Token或API Key，可通过headers字段添加。
示例：
const token = 'your-jwt-token';
fetch('/api/protected', {
headers: {
'Authorization': `Bearer ${token}`,
'Content-Type': 'application/json'
}
});
也可将常用头部封装成默认配置，提升代码复用性。
使用async/await简化逻辑
结合async/await语法可让异步代码更清晰易读。
示例：
async function getData() {
try {
const response = await fetch('/api/user');
if (!response.ok) throw new Error(response.statusText);
const data = await response.json();
console.log(data);
} catch (error) {
console.error('Request failed:', error);
}
}
这种方式避免了多层.then()嵌套，更适合复杂流程控制。
最佳实践总结
- 始终检查response.ok或状态码，避免误将错误响应当作成功处理
- 使用try/catch或.catch()捕获网络错误和解析异常
- 发送数据前正确设置Content-Type头部
- 敏感信息（如Token）不应硬编码，建议从安全环境注入
- 考虑超时机制（Fetch原生不支持，需自行封装AbortController）
- 对于文件上传，使用FormData对象并省略Content-Type，让浏览器自动设置边界
基本上就这些。Fetch API简洁高效，配合现代JavaScript语法，是当前前端发起HTTP请求的首选方案。
