>

한 페이지에 5 개의 API 호출이 있습니다. 일부 API는 응답을 제공하는 데 20 초가 걸립니다. 응답하는 데 30 초가 걸립니다. 일부는 10 초가 걸리므로 첫 번째 API가 응답을 제공하면 첫 번째 API는로드 표시기를 false로 설정합니다. 로드 표시기가 사라집니다. 그러나 다른 API는 여전히 작동 중입니다 .5 개의 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');
    }


  • 답변 # 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]);
    }
    
    
    

  • 답변 # 2

    forkJoin을 사용하지 않거나 각각을 개별적으로 제어하려는 경우이를 수행하는 다른 방법은 각 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"
    
    

  • 답변 # 3

    변수를 사용하여 API 결과를 저장 한 다음 존재 여부에 따라 콘텐츠를로드 할 수 있습니다.

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

관련 자료

  • 이전 python - 이미지의 최소 및 최대 찾기
  • 다음 NET 표준 및 NET Core