跳到主要内容

交互模式 · 数据请求

乐观更新

Optimistic Update

也叫:乐观 UI、Optimistic UI、先更新后请求

用户操作后界面立即显示成功的结果,同时在后台发请求,如果请求失败再把界面改回来。

详细解释

正常流程是「点击 → 等接口返回 → 更新界面」,网络慢时用户会觉得卡。乐观更新反过来:先假设请求会成功,马上把界面改好(点赞数立刻 +1、红心立刻变实心),请求在后台发送;如果最后失败,再回滚到原来的状态并提示用户。

它适合成功率高、失败了也容易恢复的操作:点赞、收藏、勾选待办、拖拽排序。不适合付款、删除重要数据、需要服务端计算结果的操作,这些还是老老实实显示加载状态。

跟 AI 提需求时要把「失败怎么办」说清楚:回滚到什么状态、用什么方式提示。React Query、SWR 等数据请求库都有现成的乐观更新写法。

开发者信息
术语 ID
interaction-optimistic-update
DOM 选择器
没有 DOM 线索,这个概念不在页面上直接识别。
优先级
1 · 同一层有多条命中时,优先级高的胜出
版本
v1 · 更新于 2026/09/29