在返回Http结果之前执行代码

Question

我想在返回Http请求之前执行一段代码。这是我的代码：

public getEntities(endpoint: String): Observable<T[]> {
this.openSnackBar('Loading...');
return this.http.get(endpoint) as Observable<T[]>; }

当启动Http-get请求时，我打开了一个snackbar，上面写着"Loading…"。我想在Http请求完成并收到结果时，但在返回结果之前，用this.closeSnackBar()关闭这个snackbar。

有办法做到这一点吗？我已经有了小吃条的代码：

openSnackBar(message: string) {
this.snackBar.open(message);
}
closeSnackBar() {
this.snackBar.dismiss();
}

Answer 1

我知道你的HTTPGET响应中会有一个包含T类型数组的主体，所以你可以告诉angular HttpClient，通过使用泛型：

return this.http.get<T[]>(endpoint);

这样，你就不必投射到你想要的可观察的东西上。

为了达到您的预期结果，您可以使用tap运算符：

public getEntities(endpoint: String): Observable<T[]> {
this.openSnackBar('Loading...');
return this.http.get<T[]>(endpoint).pipe(
tap((res) => this.closeSnackBar());
}

不要忘记导入表单rxjs(tap(。

值得一提的是，如果您的HTTP请求中也发生错误，您必须确保关闭小吃店，请参阅以下内容以供参考：

https://blog.angular-university.io/rxjs-error-handling/

由@Karol Trybulec代表合理评论编辑。