как показать индикатор загрузки при загрузке страницы в угловых 7, пока все не ответит API?

Question

У меня есть 5 вызовов API на странице.некоторые apis требуют 20 секунд, чтобы дать ответ.некоторым требуется 30 секунд, чтобы дать ответ.некоторые занимают 10 секунд, поэтому, когда первый API дает свой ответ, первый API устанавливает индикатор загрузки в значение false.затем индикатор загрузки исчезает.Но другие API все еще работают. Я хочу показывать индикатор загрузки до тех пор, пока не ответят пять вызовов API.Можете ли вы дать мне некоторую идею, чтобы сделать задачу.

код:

component.ts

  loading = true;
  ngInit() {

  this.api1();
  this.api2();
  this.api3();
  this.api4();
  this.api5();

  }

  api1(){
  this.loading=true;
  this.apiService.api1.subscribe(response => {
  loading = false;
  }, error=>{

  });
  }
  api2(){
  this.loading=true;
  this.apiService.api2.subscribe(response => {
  loading = false;
  }, error=>{

  });

  }
  api3(){
  this.loading=true;
  this.apiService.api3.subscribe(response => {
  loading = false;
  }, error=>{

  });
  }
  api4() {
  this.loading=true;
  this.apiService.api4.subscribe(response => {
  loading = false;
  }, error=>{

  });
  }
api5() {
  this.loading=true;
  this.apiService.api5.subscribe(response => {
  loading = false;
  }, error=>{

  });
  }

ApiService.service.ts:

     api1(): any {

      return this.http.get('apiurl');

    }
    api2(): any {

      return this.http.get('apiurl');

    }
    api3(): any {

      return this.http.get('apiurl');

    }
    api4(): any {

      return this.http.get('apiurl');

    }

    api5(): any {

      return this.http.get('apiurl');

    }

Answer 1

Вы можете использовать rxjs forkjoin для того же. Forkjoin ожидает завершения всего запроса и возвращает ответ после завершения всех вызовов API. Вот пример.

**component.ts**

isLoading: boolean;
constructor(private apiCallService: ApiSErvice) {}
ngOnInit() {
   this.isLoading = true;
   this.apiCallService.multipleApiCallFunction().subscribe(response  => {
       this.isLoading = false;
})
}


**ApiService.service.ts**

import { Observable, forkJoin } from 'rxjs';

multipleApiCallFunction() : Observable<any[]>{
 const api1 = this.http.get('apiurl-1');
 const api2 = this.http.get('apiurl-2');
 const api3 = this.http.get('apiurl-3');
 const api4 = this.http.get('apiurl-4');

  return forkJoin([api1, api2, api3, api4]);

}

Answer 2

Вы можете просто использовать переменную (и) для хранения результатов API, а затем загрузить контент на основе его существования:

<div *ngIf = "apiResults; else elseBlock">
    ...
</div>
<ng-template #elseBlock>Loading...</ng-template>

Answer 3

Другой способ добиться этого, если вы не хотите использовать forkJoin или хотите управлять каждым из них по отдельности, вы можете создать переменную Subscription для каждого вызова API, а затем в своем HTML-коде использовать * ngIf = "sub1 ||sub2 || ... || sub5 ", чтобы отобразить и скрыть индикатор загрузки, это будет примерно так:

//declare subscriptions like so
sub1: Subscription; 

ngInit() {
  sub1 = this.api1();
  sub2 = this.api2();
  sub3 = this.api3();
  sub4 = this.api4();
  sub5 = this.api5();
}

в теге панели загрузки HTML добавьте:

*ngIf="sub1 || sub2 || sub3 || sub4 || sub5"