交互模式 · 数据请求
乐观更新
Optimistic Update
也叫:乐观 UI、Optimistic UI、先更新后请求
用户操作后界面立即显示成功的结果,同时在后台发请求,如果请求失败再把界面改回来。
详细解释
正常流程是「点击 → 等接口返回 → 更新界面」,网络慢时用户会觉得卡。乐观更新反过来:先假设请求会成功,马上把界面改好(点赞数立刻 +1、红心立刻变实心),请求在后台发送;如果最后失败,再回滚到原来的状态并提示用户。
它适合成功率高、失败了也容易恢复的操作:点赞、收藏、勾选待办、拖拽排序。不适合付款、删除重要数据、需要服务端计算结果的操作,这些还是老老实实显示加载状态。
跟 AI 提需求时要把「失败怎么办」说清楚:回滚到什么状态、用什么方式提示。React Query、SWR 等数据请求库都有现成的乐观更新写法。
开发者信息术语 ID、DOM 线索、识别优先级
- 术语 ID
interaction-optimistic-update- DOM 选择器
- 没有 DOM 线索,这个概念不在页面上直接识别。
- 优先级
- 1 · 同一层有多条命中时,优先级高的胜出
- 版本
- v1 · 更新于 2026/09/29