1

I'm building a web app using Angular 6. I have a service that has a method which when called and given right parameters, sends a POST request to the server and returns the data. This is the method:

  public getDataFromServer(request, url): any {
      return this.httpClient.post(url, request, {headers: new HttpHeaders().set(this.headername, this.header ) });
  }

Now I have multiple components which uses this method. Every page in the menu (home, about, news, etc..) uses this. I want to make a request handler that would send the first request (let's say I login) and then wait until I get a response before sending another request. If I were to click on page news and then on page about before I would get response, I would already be on page about and after I get response the next request will be the one on page news, but I'm already on page about. I don't want request on news to be executed if I'm on page about.

I saw some posts with http interceptor, but I don't want the request to even be made to http. Request must not be sent. Thank you for your help in advance.

Improve this question

1 Answer 1

Reset to default
2

I think the reason that people don't respond to your question is because it's somewhat of a story. Simplifying your questions like: "I don't want to receive a callback when i have left the page" would increase answers in my opinion.

That being said.

The thing you're looking for is called unsubscribe. httpClient.post returns an Observable on which you probably .subscribe() subscribe returns a subscription which you can use to unsubscribe. For example:

@Component({etc.etc})
export class MyComponent implements OnInit, OnDestroy {

  subscription;

  constructor(private service: Service) {} // Whatever your service is called

  ngOnInit() {
    this.subscription = this.service.getDataFromServer().subscribe(
      response => {
        console.log(response);
        this.subscription = undefined;
      },
      error => {
        console.log(error);
        this.subscription = undefined;
      }
    );
  }

  ngOnDestroy() {
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
  }
}
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

thank you, this works for most of the stuff. I probably could've written it different. How about if I have a map? When I scroll through the map, it sends requests for checkpoints (so I can display them). I want to send only the last request (when scrolling stops)
I expressed myself wrongly in the comment. Basically what I meant was, that I don't want to send another request until the last request has been processed. For example, I click on maps and it sends request to server for checkpoints. Even if server hasn't given me back response I can scroll and drag the map around. Every move on google maps makes another request even if the last one has not been processed. I first want to process the last request before sending another, is that achievable using unsubscribe?
If you want to ignore intermediate requests you can just check if this.subscription == undefined. if true ? make the request, otherwise : ignore.
yea this works for ignoring all requests, I still need to execute the last request (when the user stop scrolling/dragging)
Then you need to save all the latest parameters to a variable and check if this variable is set when completing your last request. If so: execute the request with the latest parameters in the variable.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.