如何在等待后端处理的同时响应式地处理前端的 UI 操作？

Question

使用 StackOverflow 问答线程作为示例 - 当您投票赞成、反对或喜欢某个问题时，您可以看到 UI 快速响应该操作，同时侧面的赞成票数量发生变化。

我们怎样才能达到这样的效果呢？如果将每个此类操作发送到后端进行处理并使用返回的响应来更新 UI，您将看到更新缓慢并感受到故障。但是，如果将一些逻辑放在前端，您还需要在 UI 上反映操作之前处理欺诈/滥用等问题，即 - 在更改投票数之前，您不需要首先确保这是有效用户的有效点击？

Answer 1

1. 在用户点击任何内容之前，您需要确保有效的用户正在使用该应用程序。这是通过身份验证完成的，并且必须包括针对恶意用户的各种保护机制。

2. 当用户单击时，就会调用服务器。在正确架构的应用程序中，此调用是轻量级的，并且服务器响应非常快。我不知道你为什么相信“你会看到缓慢的更新并感受到故障”。向数据库添加赞成票最多需要几百毫秒（包括来自客户端的往返），特别是在异步提交或使用内存缓存的情况下。

3. 如果数据库更新导致需要执行一些复杂的操作，通常这些操作不会立即完成。例如，cron 作业可能会定期运行以计算新的排名等，正是因为您不希望每个用户都等待。或者，创建一个任务并将其放入任务队列中，以便在资源可用时执行 - 再次确保用户不会等待。

4. 在某些应用程序中，在对服务器进行调用之后、服务器的任何响应到达之前，UI 会立即更新。当呼叫失败的后果可以忽略不计时，您可以这样做。例如，如果一次赞成票未能保存在数据库中，这并不是一场灾难，特别是如果这种情况在一百万次尝试中发生一次的话。同样，在正确架构的应用程序中，调用失败的情况极少。

这是应用程序开发人员需要做出的决定。如果这样的更新可能导致用户相信现在可以执行某些其他操作，那么我不会在服务器响应之前更新 UI。例如，如果用户上传一张新照片，在我知道该照片已安全保存之前，我不会显示用于编辑或共享该照片的图标。