sxenguri
@sxenguri

Как правильно переписать такой запрос?

Подскажите, пожалуйста, как правильно реализовать следующую логику:

У меня имеется три массива, которые содержат в себя данные, которые необходимо отправить на бекенд.
Массивы могут быть пустые.
Мне нужно обновить страницу только после того, как все запросы из этих массивов вернут ответ.

Сначала я реализовал это следующим образом:
forkJoin(
  forkJoin(
    newWidgets.map(widget => this.dashboardService.addDashboardWidget(widget))
  ),
  forkJoin(
    existingWidgets.map(widget => this.dashboardService.updateDashboardWidget(widget))
  ),
  forkJoin(
    deletedWidgets.map(widget => this.dashboardService.removeDashboardWidget(widget))
  )
).subscribe(() => {
   this.router.navigateByUrl(`/questionnaires/${this.packageId}/dashboard`);
});


Но такой подход не подходит по двум причинам:
1) Если один из массивов будет пустым, то сабскрайб никогда не сработает.
2) Меня в принципе смущает эта вложенность forkJoin`ов друг в друга

В итоге конечное решение я придумал такое:
let newWidgetsRequest: Observable<any> = new Observable();
let existingWidgetsRequest: Observable<any> = new Observable();
let deletedWidgetsRequest: Observable<any> = new Observable();
let allRequest = [];

if (newWidgets.length > 0) {
  newWidgetsRequest = forkJoin(newWidgets.map(widget => this.dashboardService.addDashboardWidget(widget)));
  allRequest = allRequest.concat(newWidgetsRequest);
}

if (existingWidgets.length > 0) {
  existingWidgetsRequest = forkJoin(existingWidgets.map(widget => this.dashboardService.updateDashboardWidget(widget)));
  allRequest = allRequest.concat(existingWidgetsRequest);
}

if (deletedWidgets.length > 0) {
  deletedWidgetsRequest = forkJoin(deletedWidgets.map(widget => this.dashboardService.removeDashboardWidget(widget)));
  allRequest = allRequest.concat(deletedWidgetsRequest);
}

forkJoin(allRequest).subscribe((result) => {
  this.router.navigateByUrl(`/questionnaires/${this.packageId}/dashboard`);
});


Но тут прям вообще получились какие-то костыли, которые я даже до конца не понимаю, почему они работают.
На RxJS явно так не пишут.
Моя проблема в том, что я даже не знаю, что именно искать в документации, ибо не могу сформулировать свой вопрос без демонстрации кода.
  • Вопрос задан
  • 72 просмотра
Пригласить эксперта
Ответы на вопрос 1
Geminix
@Geminix
Фуллстек nuxt, .net разработчик
Аналог Promise.All вам нужен, вот что-то похожее https://reactivex.io/documentation/operators/zip.html
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
25 нояб. 2024, в 02:45
2000 руб./за проект
24 нояб. 2024, в 23:46
20000 руб./за проект