I want to cancel my previous request when newer one comes

Question

I have a text box and i m making a http call on each input character. But my problem is that i want to cancel my request when user enter next character in the case when my previous response not come.

Something like this might help you achieve what you want: https://codinglatte.com/posts/angular/ng-material-autocomplete-http-lookup/ There are other examples but this probably gives you a good idea of http on each input character — Jojofoulk, Sep 15 '19 at 22:43

j6m8 · Answer 1 · 2019-09-15T23:06:41.050

0

You can't cancel a HTTP request the way you expect; once you send an HTTP request to the server, the request has been sent, and even if you ignore the response, the server will still try to satisfy the request.

Exceptions:

A "streaming" HTTP request (which can be terminated)
If you use an HTTP request to trigger a job to start on the server, and use a separate HTTP request to cancel that job (but this still involves two successful http requests, rather than canceling one)

You might want to look into throttling or "debouncing" in JavaScript, where a function can be called once on every keypress, conditioned on if it hasn't been called in the past N milliseconds, e.g.

[EDIT] To be clear, some tools will let you "cancel" an HTTP request that is still in-flight (e.g. rxjs, as the commenter notes). But that doesn't necessary stop your server from processing the call if it's already been received by the server, and furthermore, cancellability is dependent upon your HTTP implementation. Read more here.

edited Sep 15 '19 at 23:06

answered Sep 15 '19 at 22:24

j6m8

2,261
2
26
34

can you please tell me how can i handle that situation. If each request are successful then it can incresess the load on server which i m using. I simply just want to my newer request will go on server only and cancel all previous request. – somji katiyar Sep 15 '19 at 22:50
With observables (rxjs) you can cancel a http request. – Manuel Panizzo Sep 15 '19 at 22:55
@ManuelPanizzo sort of true, though rxjs doesn't stop the server from receiving the request. So while you're just dropping that response on the floor and your client no longer needs to deal with the response data, you are still starting the request, and it's likely that your server will try to satisfy it (e.g expend CPU-time). For stateful requests, this isn't a true cancellation. Good to know the asker's use-case to determine if this is the case. – j6m8 Sep 15 '19 at 23:08
@somjikatiyar Unfortunately, there's no way to guarantee that your server won't receive any of the stale requests. I'd recommend adding a delay to the call, if you can afford a few more milliseconds of latency, and only making the request if no further events have taken place since the last call. If that sounds like what you need, I can help you write some sample code. – j6m8 Sep 15 '19 at 23:10
Hi guys thanks for your valuable comments. Finely i use swichmap and i have find alternative for my problem. – somji katiyar Sep 17 '19 at 10:51

score 0 · Answer 2 · answered Sep 16 '19 at 01:31

You can use rxjs switchMap operator to do that

On each emission the previous inner observable (the result of the function you supplied) is cancelled and the new observable is subscribed. You can remember this by the phrase switch to a new observable. This works perfectly for scenarios like typeaheads where you are no longer concerned with the response of the previous request when a new input arrives

Example:

// RxJS v6+
import { interval, fromEvent } from 'rxjs';
import { switchMap } from 'rxjs/operators';

fromEvent(document, 'click')
  .pipe(
    // restart counter on every click
    switchMap(() => interval(1000))
  )
  .subscribe(console.log);

Demotraste from angular university blog. You can see that when new request is coming previous request getting cancel

I want to cancel my previous request when newer one comes

2 Answers2