Fetch API 提供简洁、基于 Promise 的网络请求方式，支持 GET/POST 请求及 JSON 解析；需手动检查 response.ok 判断 HTTP 错误，结合 async/await 可提升代码可读性。
JavaScript 的 Fetch API 提供了一种现代化、简洁的方式来发起网络请求。相比传统的 XMLHttpRequest，它更易读、支持 Promise，并且原生集成了解析 JSON 等常用操作。下面介绍它的基本用法和常见场景。
基本语法与 GET 请求
Fetch 最简单的用法是发起一个 GET 请求，获取远程数据。
调用 fetch() 会返回一个 Promise，响应结果需要通过 .json() 方法进一步解析。
示例：fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error('请求失败');
}
return response.json();
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error('错误:', error);
});
发送 POST 请求
向服务器提交数据时，需配置请求选项，如方法、请求头和请求体。
立即学习“Java免费学习笔记（深入）”；
注意设置 Content-Type 为 application/json，并将数据用 JSON.stringify() 转换。
示例：fetch('https://api.example.com/users', {
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 只有在网络错误时才会触发 catch，HTTP 错误状态（如 404、500）不会自动 reject。必须手动检查 response.ok 或状态码。
- response.ok：布尔值，表示状态码是否在 200-299 之间
- response.status：返回具体的 HTTP 状态码
- 可结合这些判断来抛出错误，确保异常能被后续 catch 捕获
使用 async/await 简化写法
结合 async 和 await，可以让异步代码看起来更像同步，逻辑更清晰。
示例：async function getData() {
try {
const response = await fetch('https://api.example.com/data');
if (!response.ok) {
throw new Error(`HTTP 错误! 状态: ${response.status}`);
}
const data = await response.json();
console.log(data);
} catch (error) {
console.error('请求出错:', error);
}
}
getData();
基本上就这些。Fetch API 简洁强大，适合大多数前端请求场景，配合 async/await 使用体验更佳。不复杂但容易忽略的是对响应状态的手动判断。
