Получить статус из нескольких запросов Axios, вызванных из нескольких компонентов

Question

В моем приложении есть своего рода панель инструментов.В этой панели я позволил пользователю разместить много виджетов (каждый виджет является компонентом класса).Каждый виджет отображает разные вещи, такие как диаграммы, изображения и текст.Когда я его отображаю, каждый виджет делает аксиозный вызов для извлечения данных из бэкэнда.Мне нужен способ узнать, когда все запросы завершены, чтобы я мог полностью обработать HTML (я собираюсь экспортировать его с помощью HiqPdf позже).

Мне нужно, чтобы каждый виджет был независимым, поэтомуЯ могу использовать в других компонентах.Вот почему каждый виджет делает свой собственный вызов axios.В противном случае я думаю, что я мог бы сделать много вызовов axios в одном компоненте над моими виджетами, а затем я бы передавал все данные в качестве реквизита каждому виджету.Однако нет ... вызовы axios должны оставаться внутри каждого виджета.Я нашел много мест, где говорят об обещаниях, но в каждом примере рассказывается, как это сделать в одном компоненте.

Причина, по которой я работаю над этим, заключается в том, что мне нужно экспортировать его с помощью библиотеки.позвоните HiqPdf.Эта библиотека получает HTML в виде строки и экспортирует в PDF.Поэтому мне нужно знать, когда панель инструментов была полностью загружена, чтобы приложение могло ее экспортировать.

Answer 1

Подумайте об управляемой событиями инфраструктуре, которая сохраняет глобальное состояние вашего одностраничного приложения, и уведомляйте подписчиков о каждом изменении состояния.

Одна из известных платформ - это redux .

Еще одна простая структура - mufa .Вот некоторые похожие вопросы, которые используют mufa :

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

• Остановите связь между реагирующими компонентами, используя mufaпосле условия

В вашем случае это может выглядеть примерно так:

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 подписаться навсегда.