页面刷新时前端的幂等性

Question

假设我已经在后端处理了幂等键和查找/存储，现在是时候在前端处理了。

我有一个使用 reactjs 的前端应用程序，我确实为每个请求生成一个幂等密钥

uuid()

.

每次用户单击按钮创建订单时，我都会生成密钥。但是我有一些情况，我认为这不是生成密钥的正确位置，或者可能使用一些其他机制可以在用户刷新网页时重新使用相同的密钥。如果刷新网页，则会创建一个新的幂等密钥。

那么让我们想象这样一个场景，订单已经创建但由于某种原因请求超时，用户决定刷新网站并重试。我应该重试相同的请求但使用相同的幂等密钥对吗？

所以我想到了一些可能的解决方案来解决这个问题：

1. 使用布尔标志

   isProcessed

   和日期时间将请求的幂等密钥保存在本地存储中，并检查请求是否已处理，否则重新生成密钥。但是，如果同时清除本地存储和缓存怎么办？
2. 在apollo/axios中添加一个拦截器，以实现相同幂等键的重试机制，但是刷新会怎样？

有什么想法吗？

Answer 1

使用幂等键是正确的。但是：

1. 正如您在问题中所写，您的前端无法保证数据持久性。在 React 中，我们可以使用，例如，react-persist 包将订单数据保存在本地存储中，但在某些情况下，它可以变得清晰。
2. 让我们假设您已经找到了一个保证订单数据持久存储的解决方案。它仍然不能保护您免受各种边缘情况的影响。例如，用户可以在浏览器中打开两个选项卡，并且它们中的订单数据将不相等。另一个例子是当订单被创建时，但是由于网络中断，前端没有得到响应。之后有人（可能是商店经理）取消了订单。接下来，用户的网络再次运行。他再次点击“订单”并确定，不知道订单已经被取消了。所以使用幂等键只是解决方案的一部分，如果你就此打住，你将面临许多需要脚本处理的边缘情况。

我在工作中常用的解决前后端状态不同步问题的方案是列表版本控制。

每当用户或其他任何人更改用户订单列表（状态、内容等）时，服务器都会更新版本。它可以是订单列表的编号或哈希，存储在数据库中。在使用 POST 查询的前端，您提供一个前端已知的版本（我正在使用 If-Match header）。后端检查来自前端的版本是否等于其实际版本。如果不是，则返回，例如 409 响应代码，您必须处理这种情况。您可以查询用户订单列表并检查当前订单是否已经下单，如果是，则返回 OK 给用户，无需 POST 新订单查询。

因此，使用后端作为单一事实来源将使您摆脱由于状态去同步而产生的许多问题。