使用 Angular 4 取消 http 请求答案

【问题标题】：Cancel http request with Angular 4使用 Angular 4 取消 http 请求
【发布时间】：2018-10-11 10:17:00
【问题描述】：

在 Angular 应用程序中 subscribe() 之后，我如何才能真正取消请求？？？

像往常一样，我使用unsubscribe() 或takeUntil() 来取消我的请求like this。

但我不知道为什么它在这种情况下不起作用：

userSubscription$: Subscription;

loadUser(userId: number) {
  // Cancel request
  if(this.userSubscription$) { this.userSubscription$.unsubscribe(); }

  // Load user
  this.userSubscription$ = this.userService.getUser(userId).subscribe((user: User) => {
     // ...
  });
}

并在服务中使用 Http 获取用户：

getUser() {
  const url = '...';
  return this.http.get(url)
}

我尝试了正常的解决方案，但它只取消了Observable（意味着它在加载后没有做任何事情，但请求仍在加载 => 使我的网站变慢）。

知道为什么会这样吗？

更多信息，我正在使用：

Angular 4.0.0

使用 HttpModule 发送请求（不是 HttpClientModule）

谢谢你帮助我！

【问题讨论】：

getUser 中的代码是什么？
@DavidWalschots，我在上面更新了我的问题。这只是像往常一样发送请求的一种简单方式。
我自己做了一个小应用程序，它可以正确取消 HTTP 请求。当然，如果请求在您取消之前完成，则不会取消该请求。可能是 loadUser 被调用得非常快，或者请求完成得非常快，因为它在本地主机上？如果您通过开发者工具将浏览器的网速设置为较慢会怎样？
我明白了。但是我在请求完成之前取消了（因为请求很慢）。

标签： angular http rxjs

【解决方案1】：

一旦 HTTP 请求向您返回响应并且您想取消订阅，最好的办法是使用 take 运算符，试试这个：

this.userService.getUser(userId).take(1) subscribe((user: User) => {
     // ...
  });

根据您的角度版本从 rxjs 导入 take 运算符。

【讨论】：

我想在发送新请求之前清除旧请求。不等待 HTTP 请求返回。