实现带回滚的乐观 UI 更新

概述

乐观更新用确定性换取响应速度。当操作易于回滚且服务端结果是权威来源时它是安全的；当服务端可能拒绝或改写取值时则潜藏风险。

关键步骤

1. 在应用乐观变更前保存先前状态快照。
2. 立即应用乐观更新，并把该实体标记为处理中。
3. 成功时用服务端值覆盖，失败时恢复快照并提示错误。
4. 用请求令牌取消或忽略乱序到达的响应。

验证

• 请求未完成前界面已显示变更。
• 请求失败时精确恢复先前状态。
• 最终界面与服务端取值一致。
• 乱序响应不会覆盖更新的状态。

注意事项

• 当服务端可能以客户端无法预测的方式转换取值时，不适合乐观更新。
• 不可逆操作不应在确认前显示为已完成。

适用范围

本条目围绕「实现带回滚的乐观 UI 更新」给出可复制的步骤、验证方式与常见问题，适合需要按此流程落地的工程团队。执行时请结合自身上下文调整命令与阈值，并在变更前后留存证据，便于后续复核与回滚。

建议在正式环境落地前先在预发或隔离环境演练一遍，把关键观测指标与负责人一并记录，确保出现异常时能快速定位并恢复。

const prev = store.get();
store.set({ ...prev, liked: true });
try { store.set((await api.like(id)).data); }
catch { store.set(prev); toast.error('Could not save'); }