点赞动画可以先跑，接口状态必须能回滚
点赞动画可以先跑，接口状态必须能回滚
点赞、收藏需要即时反馈，也必须面对网络延迟与连续点击。等接口成功再播动画会显得迟钝，忽略乱序响应则会让本地状态与服务端各说各话。
比较稳妥的做法是：前端先更新可回滚的本地状态，服务端提供幂等和版本语义，前端只接受仍然有效的响应。
先统一请求与状态版本语义
可以在开发者工具中模拟高延迟，再连续切换状态，观察请求与响应的顺序。
# 使用 curl 模拟网络抖动下的乱序微交互请求发送 curl -X POST http://localhost:8080/api/v1/like -H "Content-Type: application/json" -d '{"resource_id": "example", "sequence_id": 1}' curl -X POST http://localhost:8080/api/v1/unlike -H "Content-Type: application/json" -d '{"resource_id": "example", "sequence_id": 2}' # 抓取前端 WebSocket / 微交互请求的响应时序 tcpdump -i lo0 -X port 8080重点不是假设某次请求必然乱序，而是验证发生乱序、失败或重试时，前端会不会错误地覆盖较新的状态。
乐观 UI 微交互与状态机回滚架构
乐观更新可以与请求版本、幂等键和回滚策略配合使用：
乐观 UI 状态机示例
前端可以把状态变更和网络确认分开处理。以下示例只保留最新一次操作的响应：
export interface MicroInteractionState { isLiked: boolean; likeCount: number; } export class OptimisticLikeManager { private currentState: MicroInteractionState; private sequenceCounter = 0; private pendingSequence: number | null = null; constructor( initialState: MicroInteractionState, private onStateRender: (state: MicroInteractionState, animate: boolean) => void, private apiSync: (isLiked: boolean, sequenceId: number) => Promise<boolean> ) { this.currentState = { ...initialState }; this.onStateRender(this.currentState, false); } public async toggleLike(): Promise<void> { // 1. 生成单调递增的微交互序列号 const currentSeq = ++this.sequenceCounter; this.pendingSequence = currentSeq; // 2. 备份快照供回滚使用 const rollbackState = { ...this.currentState }; // 3. 乐观 UI 更新：无需等待 API 响应，直接在 0 毫秒内计算最新 UI 状态 const nextIsLiked = !this.currentState.isLiked; this.currentState = { isLiked: nextIsLiked, likeCount: nextIsLiked ? this.currentState.likeCount + 1 : this.currentState.likeCount - 1, }; // 4. 触发微交互动画渲染 this.onStateRender(this.currentState, true); try { // 5. 异步同步给后端 API const success = await this.apiSync(nextIsLiked, currentSeq); // 检查当前是否有更新的微交互产生，若有则丢弃旧响应 if (this.pendingSequence !== currentSeq) return; if (!success) { throw new Error('API_SYNC_FAILED'); } } catch (err) { // 6. 网络异常触发确定性回滚 if (this.pendingSequence === currentSeq) { console.warn('[MicroInteraction] 接口响应失败，执行状态与动画反向回滚'); this.currentState = rollbackState; // 触发回滚动画（如红心破裂抖动） this.onStateRender(this.currentState, true); } } } }接口设计时绝不返工的三项约定
和后端约定接口时，至少明确：
- 请求如何标识和去重。递增序号、版本号或幂等键均可，关键是前后端对语义一致。
- 成功响应返回服务端确认后的状态，前端以它作为下一次同步的基准。
- 拖拽、滑块等高频输入在客户端节流或合并；是否需要批量接口取决于业务的提交语义。
微交互也需要失败设计
本地状态、网络确认和回滚说得清楚，微交互才可靠。动画可以先开始，失败时也要自然回到服务端确认状态，不能只顾那一下手感。