Question

我在一个页面中有5个api调用。一些api需要20秒才能做出响应。有些需要30秒才能做出回应。有些需要10秒钟，因此，当第一个api做出响应时，第一个api将加载指示器设置为false。然后加载指示器消失。但是其他API仍在工作，我想显示加载指示器，直到五个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');

    }

Answer 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]);

}

Answer 2

如果您不想使用forkJoin或不想单独控制每个，则可以通过另一种方法来实现此目的，可以为每个API调用创建一个Subscription变量，然后在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"

Answer 3

您可以简单地使用一个或多个变量来存储API结果，然后根据其存在来加载内容：

<div *ngIf = "apiResults; else elseBlock">
    ...
</div>
<ng-template #elseBlock>Loading...</ng-template>

Answer 4

现在这个问题似乎不活跃。但是，如果将来有人需要，我会在此处添加解决方案以显示微调器。

无论何时调用 api，您都可以使用这个 angular 包来显示 spinner( loader )。在初始加载时显示微调器非常有帮助。您还可以使用正则表达式、方法和标头来过滤 api。

https://www.npmjs.com/package/ng-http-loader

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

4 个答案: