Fetch API 是浏览器内置的现代网络请求接口，基于 Promise，语法简洁，支持多种响应类型；注意其仅在网络失败时拒绝 Promise，HTTP 错误需手动检查 response.ok 或 status。
Fetch API 是浏览器内置的、用于发起网络请求的现代 JavaScript 接口，用来替代传统的 XMLHttpRequest。它基于 Promise，语法更简洁，逻辑更清晰，支持 JSON、文本、图片、流等多种响应类型。
Fetch 的基本用法
最简单的 GET 请求只需一行代码：
fetch('https://api.example.com/data') 返回一个 Promise，成功时解析为 Response 对象。
注意：fetch 只在**网络失败（如断网、DNS 错误）时拒绝 Promise**；HTTP 错误状态（如 404、500）仍会进入 then，需手动检查 response.ok 或 response.status。
- 用
.then(res => res.json())解析 JSON 响应 - 用
.then(res => res.text())获取纯文本 - 用
.catch(err => console.error(err))捕获网络异常
发送 POST 请求并传参
发送表单数据或 JSON 数据时，需配置 options 参数：
fetch('/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username: 'admin', password: '123' })
})
-
method默认是GET，POST/PUT/DELETE 需显式声明 -
headers控制请求头，发送 JSON 时通常要设Content-Type -
body必须是字符串、FormData、Blob或URLSearchParams，不能直接传对象
处理错误与加载状态
实际项目中建议封装一层，统一处理常见逻辑：
- 检查
response.ok判断 HTTP 状态是否在 200–299 范围 - 对非 2xx 响应抛出自定义错误，便于
catch统一处理 - 添加超时控制（Fetch 本身不支持 timeout，可用
AbortController实现） - 配合 loading 状态变量，在 UI 上显示“加载中”或禁用按钮
与 async/await 结合更易读
用 async/await 替代链式 then，让异步代码像同步一样直观：
async function getUser() {
try {
const res = await fetch('/api/user');
if (!res.ok) thr
ow new Error(`HTTP error: ${res.status}`);
const data = await res.json();
return data;
} catch (err) {
console.error('获取用户失败:', err);
}
}
这样写逻辑清晰，错误处理集中，也方便复用和测试。
