fetch get 请求默认发送，无需指定 method；必须手动检查 response.ok 或 status 判断 http 错误，且响应体需用 response.json() 等方法解析，仅可读一次。
Fetch GET 请求的基本写法
直接调用 fetch() 并传入 URL 即可发起 GET 请求，它默认就是 GET 方法，不用显式指定 method: 'GET'。
常见错误是忽略返回值是 Promise，直接试图读取响应体；或者没处理网络失败（如断网）和 HTTP 错误状态（如 404、500）的区分。
-
fetch()只在网络层失败时 reject（比如 DNS 失败、请求被阻止），HTTP 状态码 4xx/5xx 不会触发 catch - 必须手动检查
response.ok或response.status来判断业务是否成功 - 响应体需通过
response.json()、response.text()等方法读取，且只能读一次
fetch('/api/users')
.then(response => {
if (!response.ok) throw new Error(`HTTP ${response.status}`);
return response.json();
})
.then(data => console.log(data))
.catch(err => console.error('请求失败:', err));
带查询参数的 GET 请求怎么拼接
手动拼接 URL 容易出错（编码问题、重复问号、& 符号转义），推荐用 URLSearchParams 构造查询字符串。
不要直接字符串拼接 ?name=张三&age=25，中文或特殊字符会导致 400 错误；也不要依赖后端“自动解码”——前端必须负责正确编码。
-
URLSearchParams自动处理编码，兼容性好（IE 除外，但现代项目通常不考虑） - 对象转参时，嵌套对象不会被递归处理，只支持一维键值对
- 如果后端要求参数顺序固定（如签名场景），
URLSearchParams的迭代顺序是插入顺序，可信赖
const params = new URLSearchParams({ name: '张三', age: '25' });
fetch(`/api/search?${params}`)
.then(r => r.json());
如何设置请求头（比如 Authorization）
GET 请求也能带请求头，常见于需要 token 鉴权的接口。注意：跨域时某些 header（如 Authorization）会触发预检（OPTIONS），后端必须允许。
容易踩的坑是把 token 写死在前端代码里，或错误地加在 URL 上（如 ?token=xxx），既不安全也不符合 REST 规范。
- 使用
headers选项传入对象，key 必须是合法 header 名（如'Authorization'，不能写成'authorization'，虽然多数浏览器会自动首字母大写） - Token 类型要写全，比如
'Bearer xxx'、'Basic xxx'，少空格或大小写错误都会被拒绝 - 若后端未配置
Access-Control-Allow-Headers，浏览器控制台会报 CORS 错误，提示 “Request header field authorization is not allowed”
fetch('/api/profile', {
headers: {
'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'
}
});
为什么 fetch().then() 有时不执行，也没报错
最可能的原因是：你忘了 return 响应解析方法（如 response.json()），导致后续 then 接收到的是一个未 resolve 的 Promise，看起来像“卡住”了。
另一个隐蔽问题是：在 .then() 里抛出错误但没写 .catch()，错误会被静默吞掉（尤其在旧版 Chrome 中），控制台也不显示。
- 每个
then()回调里，如果返回的是 Promise（如response.json()），必须确保它被链式传递下去 - 避免在
then()中直接操作 DOM 或调用无返回值函数后结束，这样下一个then()会收到undefined - 调试时可在每个
then()开头加console.log('here')，确认执行流是否中断在某一步
真正麻烦的是那些没被 catch 的 Promise rejection —— 它们不会中断主线程，但会让调试变得毫无头绪。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
