CODEWITHSUNDEEP
javascriptreactjsaxios
Arturio
Arturio

Reputation: 456

Retrieve the status from multiple axios requests called from multiple components

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.

Upvotes: 0

Views: 68

Answers (1)

Abdennour TOUMI
Abdennour TOUMI

Reputation: 93203

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 .

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

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.

Upvotes: 1

Related Questions