Fetch API 是浏览器内置的现代网络请求接口，基于 Promise，支持 async/await；GET/POST 请求需手动处理 HTTP 错误和 JSON 解析，注意 credentials、超时及进度等限制。
Fetch API 是浏览器内置的、用于发起网络请求的现代 JavaScript 接口，它比传统的 XMLHttpRequest 更简洁、更强大，基于 Promise，天然支持 async/await。
基本用法：发起一个 GET 请求
最简单的 fetch 调用只需要传入一个 URL 字符串：
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('请求失败:', error));
- fetch 返回一个 Promise，代表响应的未来值
- 注意：fetch 只在发生网络错误（如断网）时 reject；HTTP 状态码如 404、500 不会触发 catch，需手动检查 response.ok 或 response.status
- response.json() 也返回 Promise，要等它解析完才能拿到真正的数据
发送 POST 请求并携带 JSON 数据
需要配置 options 对象，指定 method、headers 和 body：
const data = { username: 'alice', password: '123' };
fetch('https://api.example.com/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
.then(res => {
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.json();
})
.then(json => console.log(json))
.catch(err => console.error(err));
- body 必须是字符串、Blob、FormData 等可序列化类型；JSON 需先用 JSON.stringify()
- 手动检查 res.ok（等价于 status 在 200–299 区间），避免把服务端错误当成功处理
- 设置 Content-Type 头让后端知道你发的是 JSON
使用 async/await 让代码更清晰
配合 async 函数，可以写出接近同步风格的请求逻辑：
立即学习“Java免费学习笔记（深入）”；
async function getUser(id) {
try {
const res = await fetch(`/api/users/${id}`);
if (!res.ok) throw new Error(res.statusText);
const user = await res.json();
return user;
} catch (err) {
console.error('获取用户失败:', err);
throw err;
}
}
// 调用
getUser(123).then(u => console.log(u));
- await 会暂停函数执行，直到 Promise settle，写起来更直观
- 推荐始终用 try/catch 包裹 await 表达式，统一处理网络和解析错误
- 多个 await 可以按顺序执行，也可用 Promise.all 并发请求
常见注意事项
- 默认不带 cookie：跨域请求需显式加 credentials: 'include'
- 没有超时控制：fetch 本身不支持 timeout，需用 AbortController 手动中断
- 不自动重定向到登录页：遇到 401/403 应由前端判断并跳转，fetch 不会“跳转”
- 不支持 progress 事件：上传进度需用 XMLHttpRequest 或第三方库（如 axios）
基本上就这些。fetch 简洁够用，日常开发中搭配 async/await 和简单的错误检查，就能覆盖绝大多数场景。
