Angular:在使用 HttpClient、Observable 和异步管道加载 http 数据时执行工作

Meh*_*aki 0 observable rxjs angular angular6

我在 angular 6 应用程序中使用 HttpClient 来加载数据。成功加载数据后,我需要做一些额外的工作。如果我使用 subscribe 功能,我可以很容易地在 subscribe 中做到这一点,例如:

http.get("/addressOfService").subscribe(data=>{
   this.info =data;
   DoJob();
});
Run Code Online (Sandbox Code Playgroud)

但我知道加载数据并在视图中使用它的最佳实践是尽可能长时间地使用异步管道,所以我正在使用它。现在我的问题是在加载数据并且用户使用异步管道时运行函数的最佳实践是什么。我尝试了一些不同的解决方案,发现我可以使用 map 函数,例如:

http.get("/addressOfService").pipe(map(data=>{
   DoJob();
   return data;
}));
Run Code Online (Sandbox Code Playgroud)

但我不确定这是否是一个好习惯。

Fat*_*med 5

您应该使用tap来执行副作用,因为map应用一个函数来更改发出的每个元素,而这不是您的情况

getData() {
 this.isLoading = true;
 http.get("/addressOfService").pipe(tap(_ => {
    DoJob();
    this.isLoading = false; // in case of success hide loading spinner
 }));
}
Run Code Online (Sandbox Code Playgroud)