Question

假设我有申请（无论前端是什么）。

后端只是API。

有很多页面/表格。每个页面/表单都需要与API进行一些交互。

可能会出现许多错误：

 1. User is disconnected from network
 2. User is not authenticated 
 3. API for some reason returns unexpected 500 code

在每个表单和每个页面中编码处理这些错误都是不好的（因为我们想要通知用户出错了）所以必须在一个地方完成。

例如，在Vue中，我可以设置http拦截器，它可以吞下断开的网络错误和500个错误并向用户显示信息。

但是有些事情可能会很糟糕，比如网络应用每N秒检查一次API，所以每隔N秒它就会显示错误（如果网络断开连接）。

我在哪里可以阅读有关Web应用程序架构以删除此类代码重复的内容？

另一件事，向用户显示应用正在处理它的请求

在React中我知道我可以使用类似

的东西来制作Redux商店

{
    "loading": false
}

然后每个页面/表单调度动作，这使得loading = true，在完成请求后设置loading = false，所以在某些顶级组件中我可以显示加载微调器。

在哪里阅读有关此类案件的内容？

P.S。我认为，问题主要是关于中央状态对象（如Redux）。那么在一个地方处理前端错误的最佳解决方案是什么？可能有一些关于设计应用程序状态的好文章吗？

Answer 1

您的问题非常广泛，这实际上取决于您的应用和框架，但我会尝试查明一些常见用例：

每个框架都有拦截器概念（Vue，Angular，React），按照你的建议使用它们很好
关于你提到的情况，该应用程序ping一个API并通知用户很多时间 - 你可以通过使用类似showedMessage的布尔值轻松克服它，如果它是假的，你将它转为如果为true，则向用户显示消息，下次网络恢复时，将其重新设置为false。这样，您只能显示一次网络关闭消息。
Redux并不是React独有的，而且还有angular（ngrx）和Vue（vuex）的实现，它们都处理同一个处理一个主要状态对象的概念，即所有组件共享。这是目前推荐的方法。另一种选择是mobx，但它不太常见，我认为只有反应有一个实现。
另一种方法是使用自定义事件，但我只会推荐用于不超过5种事件类型的小型应用，否则您将很快跟踪发生的事件。