问题描述
我在一个页面中有5个api调用.一些api需要20秒才能做出响应.有些需要30秒才能做出回应.有些需要10秒钟，因此，当第一个api做出响应时，第一个api将加载指示器设置为false.然后加载指示器消失.但是其他api仍在工作，我想显示加载指示器，直到五个api调用响应为止.你能给我一些想法去做这个任务吗?
I have 5 api calls in a page. some apis take 20 sec to give response. some take 30 sec to give response. some take 10 sec so, when first api gives its response, first api sets loading indicator false. then loading indicator disppears. But other apis are still working I want to show loading indicator until the five api calls response. can you please give me some idea to do the task.
代码:
component.ts
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:
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');
}
推荐答案
您可以使用rxjs forkjoin来实现. Forkjoin等待所有请求完成，并在所有api调用完成后返回响应.这是示例.
You can use rxjs forkjoin for the same. Forkjoin waits for all the request is complete and return the response when all the api call complete. Here is the example.
**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]);
}
这篇关于如何在角度7上显示页面加载时的加载指示符，直到所有API响应?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！