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

Question

I have a sort of Dashboard in my application. In this dashboard I let the user put many widgets (each widget is a class component). Each widget renders different stuff, such as, charts, images, and text. When I display it, each widget make an axios call to retrieve data from backend. I need a way to be able to tell when all the requests have finished so I can get the HTML completely rendered (I'm going to export it using HiqPdf later).

I need each widget to be independent so I can use in other components. That's why each widget make its own axios call. Otherwise I think I could make many axios calls in a single component that is above my widgets and then I would pass all the data as props to each widget. However, no... the axios calls must stay inside each widget. I've found many places talking about promises, but every example talks show how to do it in a single component.

The reason I'm working on it is because I have the need to export it using a library call HiqPdf. This library receives a HTML as string and exports to PDF. Therefore, I need to know when the dashboard has been completely loaded to let the application export it.

Answer 1

Think about an event-driven framework that persists the global state of your single page app and notify subscribers whenever there is a change in the state.

One of the famous frameworks is redux .

Another simple framework is mufa . These are some similar questions that leverages mufa :

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

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

For your case, it might be something like this:

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')
  }

})

Note, one will subscribe once only.. while on subscribe forever.