ngOnInit中所有异步操作的角度等待栏

时间:2019-03-13 15:56:26

标签: javascript html angular asynchronous

我想添加一条等待线this,以使用户等待,直到检索到所有必需的数据。
问题是我有几个HTTP调用,所以我不知道是否存在捕获所有这些请求结束的简单方法(我想到了一个计数器,只有在所有方法结束时,我才为每次调用结束增加一个计数器必须隐藏等候栏。
由于这是一个普遍的问题,有一种简单的方法可以做到这一点?
例如,这是一个组件代码:

ngOnInit() {
   this.spinner.show();
   call1();
   call2();
   call3();
   .....
   callN();

   //At the end of all method
   this.spinner.hide();
}

call1() {
    this.service.getAtti().subscribe((apiResult: ApiResult<a[]>) => {   
      this.a = apiResult.Data;
    }
    );
  }

  call2() {
    this.service.getDestinatari().subscribe((apiResult: ApiResult<b[]>) => {
      this.b =  apiResult.Data;
    }
    );
  }

  call3() {
    this.service.getRichiedenti().subscribe((apiResult: ApiResult<c[]>) => {
      this.c =  apiResult.Data;
    }
    );
  }

  callN() {
    this.service.getMessi().subscribe((apiResult: ApiResult<d[]>) => {
      this.d = apiResult.Data;
    }
    );
  }

1 个答案:

答案 0 :(得分:0)

  

forkjoin不适用于方法参数,您能帮忙吗?

对不起,我不明白这个问题。

也许下面的人会回答它:

ngOnInit() {
   this.spinner.show();
   let calls = [];
   calls.push(call1());
   calls.push(call2());
   calls.push(call3());
   .....
   calls.push(callN());

   Observable.forkJoin(calls).subscribe(results => { 
     this.spinner.hide();
   });
}

call1() {
    return this.service.getAtti().pipe(tap((apiResult: ApiResult<a[]>) => {   
      this.a = apiResult.Data;
    }
    ));
  }

  call2() {
    return this.service.getDestinatari().pipe(tap((apiResult: ApiResult<b[]>) => {
      this.b =  apiResult.Data;
    }
    ));
  }

  call3() {
    return this.service.getRichiedenti().pipe(tap((apiResult: ApiResult<c[]>) => {
      this.c =  apiResult.Data;
    }
    ));
  }

  callN() {
    return this.service.getMessi().pipe(tap((apiResult: ApiResult<d[]>) => {
      this.d = apiResult.Data;
    }
));

}