Fetch 结合 async/await 可提升异步请求代码可读性，需用 try/catch 捕获网络错误，手动检查 response.ok 或 status 处理 HTTP 错误，响应体须调用 .json() 等方法并 await，封装时应统一鉴权、错误处理和请求头，注意避免顶层 await、混淆 Response 与 JSON、解析失败未捕获及 Promise.all 误用串行等问题。
Fetch 结合 async/await 能让异步请求代码更清晰、更易读，避免嵌套 Promise.then() 和错误处理分散的问题。
用 async 函数包裹 fetch 请求
把 fetch 调用写在 async 函数里，就能直接用 await 等待响应，不用链式调用 then：
- fetch 返回的是 Promise，await 会自动解包成功响应（但不是 JSON 数据本身）
- 必须用 try/catch 捕获网络错误或 reject（比如断网、跨域失败），fetch 不会因 HTTP 状态码（如 404、500）抛错
- 响应体需手动调用 .json()、.text() 等方法读取，它们也返回 Promise，同样可用 await
处理 HTTP 状态码（如 4xx/5xx）
fetch 默认只在网络异常时 reject，200–299 以外的状态码仍算“成功”。需要手动检查 status：
- 拿到 response 后先判断 response.ok（等价于 status 在 200–299）
- 或者显式判断 response.status >= 400，然后 throw 错误，让外层 catch 捕获
- 这样能让业务错误（如后端返回 401）和网络错误统一走同一套错误处理逻辑
封装成可复用的请求函数
把通用逻辑（鉴权头、错误统一处理、loading 状态）抽出来，让业务代码专注数据本身：
立即学习“Java免费学习笔记（深入）”；
- 默认加 Content-Type: application/json，body 自动 JSON.stringify
- 从 localStorage 或全局变量读 token，加到 Authorization 头
- 对非 ok 响应 throw new Error(response.statusText)，便于上层识别
- 函数本身是 async 的，调用时直接 await，无需再包一层 Promise
避免常见陷阱
几个容易出错的地方要注意：
- 不能在顶层作用域直接 await fetch（ES Module 不支持），必须放在 async 函数内
- await fetch() 得到的是 Response 对象，不是 JSON 数据，少写 .json() 就会得到 unreadable stream
- catch 只捕获 reject，不捕获语法错误或 .json() 解析失败，后者需要额外 try/catch 包裹解析步骤
- 并发多个请求时，用 Promise.all([await f1(), await f2()]) 是串行，应写成 await Promise.all([f1(), f2()])
不复杂但容易忽略细节，理清 fetch 生命周期和 await 的作用范围，就能写出干净又健壮的请求逻辑。
