04Fetch 与 Web 存储

前端要「活」起来，离不开两件事：向服务器要数据（fetch）， 在本地记状态（Web Storage）。本课讲清 fetch 的两步走、 常见配置、错误处理，以及 localStorage / sessionStorage 的正确用法。

约 15 分钟 4 个动手实验 数据进出

一、fetch 基本姿势

fetch(url) 返回 Promise，resolve 出一个 Response。 注意：HTTP 404 / 500 不会 reject——只有网络错误才会。 要自己判断 response.ok。

1fetch(url) —— 发出请求，得到 Response（仍可能 404/500）
2检查 response.ok —— status 在 200–299 才算成功，否则手动 throw
3response.json() / text() / blob() —— 解析体（这一步也是 Promise）
4使用数据 / catch 错误 —— 网络失败、解析失败都会进 catch

二、fetch 的第二参：init 对象

字段作用示例
method HTTP 方法 'GET' / 'POST' / 'PUT' / 'DELETE'
headers 请求头 { 'Content-Type': 'application/json' }
body 请求体（GET 不能有） JSON.stringify({ name: '小明' })
credentials 是否带 cookie 'include' / 'same-origin'
signal 中断请求 AbortController 的 signal
模拟 GET / POST：用本地 mock 函数演示 fetch 的完整调用与错误分支（不依赖外网）
真项目里 POST 别忘了 headers['Content-Type']，body 必须 JSON.stringify。 跨域（CORS）问题在 DevTools Network 面板看 response headers。

三、中断请求：AbortController

搜索框「输入即请求」的场景，每次新输入先 abort() 上一次，避免旧结果覆盖新结果。

四、Web 存储：localStorage / sessionStorage

localStoragesessionStoragecookie
生命周期 永久（手动清才没） 标签页关闭即没 可设过期时间
容量 约 5–10MB 约 5MB 约 4KB
是否随请求发送 否 否 是（自动带）
同源 是 是 可跨子域（配置）
典型用途 主题、token、草稿 一次性向导、表单暂存 会话凭证
本地存储读写：设置用户名与主题偏好，刷新预览（重跑 lab）后仍在
存储的是字符串。对象要 JSON.stringify 写入、JSON.parse 读出。 用 try/catch 包一层——隐私模式和超容量都会抛错。

五、安全与体积注意

  • 别把敏感 token 明文丢 localStorage——任何 XSS 都能读走。重要凭证优先 httpOnly cookie。
  • 存储有上限（约 5MB），大文件用 IndexedDB 或后端。
  • 多标签页同步可听 storage 事件。
  • 要过期的数据自己记 ts，读取时判断。

六、和前面知识的连接

  • Promise / async：fetch 天然异步，和 await 是绝配。
  • 事件循环：网络回来后进宏任务，then 进微任务。
  • JSON：前后端数据交换的通用格式（05 章对象与数组的基础）。
  • CORS：跨域报错看响应头；开发环境常配代理。

七、实战骨架：getJSON / postJSON

八、本章小结

  • fetch 两步走：拿 Response → 自己判 ok 再 json()。
  • init 支持 method / headers / body / credentials / signal。
  • 用 AbortController 取消过期请求。
  • localStorage 永久、sessionStorage 随标签页；都是同源字符串 KV。
  • 对象要 JSON 序列化；敏感数据别放 localStorage。
  • 请求骨架封装成 get/post/put/del，全项目复用。
动手练习： ① 用 fetch 打开一个公开 JSON API（如 https://jsonplaceholder.typicode.com/todos/1）打印结果； ② 封装 getJSON 并加上超时（提示：Promise.race）； ③ 做一个「记住主题」功能：读 localStorage 决定亮/暗色。