且构网

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

如何在 angular 7 页面加载时显示加载指示器,直到所有 apis 响应?

更新时间:2023-12-05 17:07:40

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

}