Как приостановить все другие запросы API httpclient, пока основной запрос API не будет завершен, и возобновить другой запрос API блокировки?

Question

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

Основные запросы API также выполняются в порядке последовательности.

Я уже добавил HttpInterceptor для добавления некоторых заголовков ивсе.

Объяснение того, что происходит сейчас.

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

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

мы не можем определить, сколько запросов API будет вызываться после инициализации _layout компонентов, поскольку вся маршрутизация выполняется в этом.

Answer 1

В своем шаблонном компоненте _layout создайте тег ng-container и поместите все свои дочерние теги компонента внутри ng-контейнера. Теперь у вас может быть ngIf для тега ng-container, чтобы он не отображал дочерние компоненты, если main api еще не дал ответа. Таким образом, дочерние компоненты Api не будут запущены. Надеюсь это поможет.

Answer 2

Я думаю, что для этого вы должны использовать .flatMap () оператор rxjs. Этот оператор обычно используется для последовательного вызова API.

Пожалуйста, проверьте ссылки ниже для получения дополнительной информации: http://reactivex.io/documentation/operators/flatmap.html https://stackoverflow.com/a/40666072/9766269

Answer 3

Попробуйте:

this.http.get(mainApiUrl).pipe(
    switchMap(
        mainApiResponse => {
        // mainApiResponse has result from main api
        return forkJoin(
            [
                this.http.get(otherApiUrl1),
                this.http.get(otherApiUrl2)
            ]
        ).pipe(map(otherResponsesArr => [mainApiResponse, ...otherResponsesArr]))
    })
).subscribe(responseArr => {
        mainResponse = responseArr[0];
        otherResponse1 = responseArr[1];
        otherResponse2 = responseArr[2];
    });

Объяснение

Вызывается основной API, и при получении ответа мы используем оператор switchmap, чтобы получить выходные данные первого API. позвоните, отмените подписку и передайте результат для вызова следующего набора API с помощью forkjoin (реальный сценарий использования может отличаться).

Answer 4

this.http.get(url).subscribe(res => {
         // Main Api is Called here
        }, error => {
          console.log(error);
        }, () => {
          console.log('When api Request is Complated');
            // Rest of the API Called here When Main Api In Completed.
        }
      );