使用Angular 4取消http请求

Question

How can I actually cancel request after subscribe() in Angular app???

As usual, I use unsubscribe() or takeUntil() for cancelling my requests like this .

But I have no idea why it's not working in this case:

userSubscription$: Subscription;

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

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

And getUser in Service with Http:

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

I tried with normal solutions but it only cancels Observable (means it didn't do anything after loading but requests are still loading => Make my site is slowly).

Any idea why this happens?

For more information, I'm using:

• Angular 4.0.0
• Using HttpModule for sending request (not HttpClientModule)

Thanks for helping me!

Answer 1

Once an HTTP request has returned you the response and you want to unsubscribe the best idea is to use the take operator, try this:

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

Import the take operator from rxjs depending on your angular version.