홈>2020-02-26 11:41

javascript - 모든 API 응답이있을 때까지 각도 7에서 페이지로드에로드 표시기를 표시하는 방법은 무엇입니까?

한 페이지에 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');
    }

javascriptjqueryangularcss3angular7

답변 # 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>
```

Python2.net

javascript - 모든 API 응답이있을 때까지 각도 7에서 페이지로드에로드 표시기를 표시하는 방법은 무엇입니까?

관련 자료