홈>
한 페이지에 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
- 답변 # 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>
관련 자료
- javascript - Angular Universal, '새로 고침'을 두 번 클릭 할 때까지 앱이로드되지 않습니다
- react native - withAuthenticator (App)가 다른 앱 구성 요소를로드 할 때까지 기다리도록 강제 실행
- javascript - Angular 7에서 HTTP get 요청의 응답을 json 파일로 저장하려면 어떻게해야합니까?
- Angular 7 + ShadowDOM - 각도 7 + 그림자@ angular/material skins 로딩 전략
- javascript - 페이지로드에 각도 재질 진행률 표시 줄 사용
- Angular 6+ HttpInterceptor에서 오류에 대한 성공적인 응답 변경
- 각도 7에서 HTTP 응답이 오류로 수신되고 있습니다
- 자식 경로가있는 각도 8 지연 로딩
- uri - Jira API의 "완료"응답
- javascript - 동일한 페이지를 반복적으로로드하면 Angular 앱이 느려집니다
- angular - 업로드 api에서 페이로드 응답 받기
- c# - Angular의 HTTP 응답은 200을 제공하지만 서버에 도달하지 못했습니다
- API가 오류를 응답 할 때 Angular Interceptor에서 모든 http 응답을 얻는 방법
- Angular 6+ httpClient에서 어떤 응답 상태 코드가 catchError로 전환됩니까?
- typescript - 동일한 URL 경로이지만 사용자 역할에 따라 다른 구성 요소를로드합니다모난, 딱딱한, 모서리가있는, 각도의, 뼈가 앙상한
- Angular 앱의 로딩 화면에 메시지를 전달하는 방법은 무엇입니까?
- angular7 router - 각도 7 중첩 지연 로딩 문제
- rest - 각도 7에서 Http POST 요청 후 응답이 null입니다
- c# - Angular- 항상 400 개의 잘못된 요청 응답을받습니다
- 각도 라우팅 redirectTo가 지연로드에서 작동하지 않습니다
관련 질문
- javascript : 다중 선택 드롭 다운에서 2 개의 옵션을 비활성화하고 해당 옵션을 회색으로 표시하는 방법
- javascript : 초점을 숨기고 키보드가 필요할 때 시간 초과로 흐리게 표시 하시겠습니까?
- javascript : jQuery는 입력 내용이 변경되었는지 확인할 수 있습니까?
- javascript : Angular에서 사전 용 ngFor를 어떻게 만드나요?
- javascript : 진행할 때 Bootstrap Carousel이 페이지 상단으로 이동
- javascript : JQUERY 자동 완성이 PHP 스크립트에서 반환 된 결과를 표시하지 않음
- javascript : 서로 통신 할 수있는 두 개의 jQuery 플러그인 생성
- PHP 함수 number_format에 해당하는 JS는 무엇입니까?
- javascript : jQuery에 .text () 메서드를 사용할 때 줄 바꿈을 유지하는 방법은 무엇입니까?
- javascript : 너비= shinyjqui 사용시 100 % 손실
당신은 rxjs forkjoin을 사용할 수 있습니다. Forkjoin은 모든 요청이 완료 될 때까지 기다렸다가 모든 API 호출이 완료되면 응답을 반환합니다. 여기 예가 있습니다.