从多个组件调用的多个 axios 请求中检索状态

Question

我的应用程序中有一个仪表板。在这个仪表板中，我让用户放置了许多小部件（每个小部件都是一个类组件）。每个小部件呈现不同的内容，例如图表、图像和文本。当我显示它时，每个小部件都会进行 axios 调用以从后端检索数据。我需要一种能够判断所有请求何时完成的方法，以便我可以完全呈现​​ HTML（稍后我将使用 HiqPdf 导出它）。

我需要每个小部件都是独立的，以便我可以在其他组件中使用。这就是为什么每个小部件都进行自己的 axios 调用的原因。否则，我认为我可以在我的小部件上方的单个组件中进行许多 axios 调用，然后我会将所有数据作为道具传递给每个小部件。但是，不... axios 调用必须保留在每个小部件中。 我发现很多地方都在谈论 Promise，但每个示例都展示了如何在单个组件中完成它。

我正在研究它的原因是因为我需要使用一个名为 HiqPdf 的库来导出它。该库接收 HTML 作为字符串并导出为 PDF。因此，我需要知道仪表板何时已完全加载，以便应用程序将其导出。

Answer 1

考虑一个事件驱动的框架，它可以保持单页应用的全局状态，并在状态发生变化时通知订阅者。

著名的框架之一是redux。

另一个简单的框架是mufa。这些是利用mufa 的一些类似问题：

• https://stackoverflow.com/a/42124013/747579

• Stop the communication between react components using mufa after a condition

对于您的情况，可能是这样的：

const all_calls = [];
const {on, one, fire, unsub} = mufa;

axios.get('call1').then((data) => {

   fire('call1_received', data);
})


axios.get('call2').then((data) => {

   fire('call2_received', data);
});


one('call1_received', () => {
  all_calls.push('call1_received');
  if (all_calls.length === 2) {
     alert('!!!! All calls have been received')
  }

})

one('call2_received', () => {
  all_calls.push('call2_received');
  if (all_calls.length === 2) {
     alert('!!!! All calls have been received')
  }

})

注意，one 将只订阅一次.. 而on 将永远订阅。