且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

如何在角度7上显示页面加载时的加载指示符,直到所有API响应?

更新时间:2023-12-05 17:08:04

您可以使用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]);

}