前端异步请求学习清单

前端异步请求 · 学习清单（按顺序打卡）

用法：每条勾完再进下一条；每条都配了「自检」，答得出来才算过。

阶段 1｜异步基础（1 天）

• 1.1 同步 vs 异步：为什么 JS 需要异步（单线程 + 不阻塞）
  • 自检：说得出「异步 ≠ 多线程」
• 1.2 事件循环：调用栈、任务队列、宏任务 vs 微任务
  • 自检：写出 console.log / setTimeout / Promise.then 混合代码的输出顺序
• 1.3 回调地狱：问题是什么、为什么需要 Promise
  • 自检：能说出回调的三个缺点（嵌套、错误处理分散、无法 return）

阶段 2｜Promise（1～2 天）

• 2.1 三态与不可逆：pending / fulfilled / rejected
• 2.2 链式调用：then 返回新 Promise；值穿透；错误冒泡
• 2.3 错误处理：catch vs then(fn, errFn) 的区别
• 2.4 静态方法：resolve / reject / all / allSettled / race / any
• 2.5 手写 Promise（简化版）：实现 then 链式 + 状态机
  • 自检：能手写 Promise.all
• 2.6 微任务：queueMicrotask、process.nextTick（了解）

阶段 3｜async / await（1 天）

• 3.1 基本语法：await 后面接什么、返回值是什么
• 3.2 错误捕获：try/catch；多个 await 的错误边界
• 3.3 串行 vs 并行：await a; await b 与 Promise.all([a, b]) 的耗时差异
• 3.4 循环中的 await：for...of 串行 vs map + Promise.all 并行
• 3.5 顶层 await（ESM）
  • 自检：把「串行改并行」的改写写一遍

阶段 4｜请求库（2 天）

• 4.1 XMLHttpRequest（了解原理，知道为什么被取代）
• 4.2 fetch：默认不携带 cookie、res.ok 不会 reject、需手动 res.json()
• 4.3 fetch 封装：统一前缀、超时、JSON 解析、错误归一
• 4.4 axios：实例、拦截器、转换器、timeout、上传进度
• 4.5 fetch vs axios 选型
  • 自检：说出 3 个 fetch 的坑 + 3 个 axios 的优势

阶段 5｜工程化封装（2 天）

• 5.1 统一配置：baseURL、超时、默认 header
• 5.2 请求拦截器：注入 token、租户、traceId
• 5.3 响应拦截器：拆包、业务码判断、统一错误提示
• 5.4 API 分层：api/xxx.ts 只放 URL 与参数，业务不写裸请求
• 5.5 类型化：响应体泛型、入参 interface、错误类型
• 5.6 多环境：.env.* + 网关前缀
  • 自检：能从零搭一个 request.ts

阶段 6｜取消、超时、竞态（1～2 天）

• 6.1 AbortController：signal / abort() / reason
• 6.2 取代 CancelToken：写法对照、错误识别（AbortError / ERR_CANCELED）
• 6.3 超时：AbortSignal.timeout()、AbortSignal.any()
• 6.4 竞态（stale response）：请求序号 / 取消上一次 / 丢弃过期响应
• 6.5 防抖节流：debounce 与取消的配合
• 6.6 卸载清理：组件销毁时 abort
  • 自检：手写一个「搜索框输入自动取消上一次请求」的例子

阶段 7｜错误与重试（1～2 天）

• 7.1 错误分类：网络 / 超时 / 取消 / HTTP 状态 / 业务码
• 7.2 差异化处理：取消静默、401 跳登录、5xx 可重试
• 7.3 重试策略：最大次数、指数退避 + 抖动
• 7.4 幂等：哪些请求能重试、哪些不能
• 7.5 全局兜底：unhandledrejection、错误上报
  • 自检：写一个 retry(fn, { times: 3, delay }) 且只对 GET 生效

阶段 8｜鉴权与安全（1～2 天）

• 8.1 token 存放与注入：header vs cookie
• 8.2 401 无感刷新：刷新期间请求排队、刷新后重放
• 8.3 并发刷新去重：避免多个请求同时触发刷新
• 8.4 安全：XSS（不 innerHTML 渲染接口数据）、CSRF、敏感数据脱敏、token 不上 URL
  • 自检：画出「401 → 刷新 → 重放队列」的时序

阶段 9｜数据缓存与同步（2～3 天，进阶）

• 9.1 SWR / stale-while-revalidate
• 9.2 缓存 key 设计与失效（invalidate）
• 9.3 请求去重（in-flight 合并）
• 9.4 乐观更新与失败回滚
• 9.5 分页 / 无限滚动、keepPreviousData
• 9.6 现成方案：TanStack Query / SWR（Vue 版）
  • 自检：说清 cacheKey、staleTime、revalidateOnFocus

阶段 10｜性能与体验（1～2 天）

• 10.1 加载态：骨架屏、延迟显示 loading（防闪烁）
• 10.2 并发控制：手写并发池（limit N）
• 10.3 请求合并 / BFF 聚合
• 10.4 HTTP 缓存：Cache-Control、ETag、304
• 10.5 上传下载：分片、断点续传、进度、blob 导出
  • 自检：实现 pLimit(requests, 5)

阶段 11｜工程与质量（1～2 天）

• 11.1 Mock：MSW / vite-plugin-mock
• 11.2 日志埋点：慢请求、失败率、traceId 透传
• 11.3 单测：mock 网络层，断言 loading/error/data 三态
• 11.4 调试：DevTools Network（节流、瀑布、重放）

阶段 12｜高阶场景（了解，按需）

• 12.1 SSE（EventSource）
• 12.2 WebSocket：心跳、重连、断线补偿
• 12.3 流式响应：ReadableStream + 打字机效果
• 12.4 离线队列：IndexedDB 暂存 + 恢复后补发
• 12.5 长轮询 与选型对比

阶段 13｜综合实战（验收）

• 13.1 写一个 useRequest：manual / 自动请求 / 参数变化重跑 / 防抖 / 缓存 / 取消 / 重试 / 错误回调
• 13.2 写一个 request.ts：拦截器 + 类型化 + 401 刷新 + 取消 + 重试
• 13.3 复盘：把 1～12 的知识点串成一张图

建议节奏

阶段	建议时长
1～3（基础）	3～4 天
4～6（请求与封装）	5～6 天
7～8（错误与鉴权）	3～4 天
9～10（缓存与性能）	4～5 天
11～13（工程与实战）	3～5 天