how to use switchMap to cancel pending http reques

Question

i tried canceling pending http request using subscription.unsubsribe like this:

getAgentList(pageNumber: number, filter: string): any {
   let requestUrl: string = 'api/service/agents_search?ACCT=' 
   +this.accountId;

if ( this.subscription ) {
    this.subscription.unsubscribe();
}

this.subscription =  this.backEndCommService.getData(requestUrl)
.subscribe(
        (res: any) => {
        let serverResponse: ServerResponse = new 
        ServerResponse(this.accountId, pageNumber, res.search_results, 
        res.resultRows, res.pageSize, res.resultPages)
                this._agentListData.next(serverResponse);
            },   
       (err: HttpErrorResponse) => {
                let errorMessage: string;
                if (err instanceof TypeError) {
                    errorMessage = 'Script error: ' + err.message;
                } 
                console.log(errorMessage);
    });
}

I wonder how can I apply switchMap to this code in order to kill pending requests to the URL ( for example autocompletion search input when first search taking to much time and a second one entered and I want to dismiss the first one.) thanks

Answer 1

Looks like the problem is that the subscription is done after the next. Think of it like addEventListener on the DOM. You receive events after you add the listener, or in this case, the subscriber.

getAgentList(pageNumber: number, filter: string): any {
    let requestUrl: string = ‘...’

    // assuming this.$filter is a Subject
    // subscription to it first
    this.$filter.switchMap(requestUrl => this.backEndCommService.getData(requestUrl))
        .subscribe(
            (res: any) => {
                let serverResponse: ServerResponse = new 
                ServerResponse(this.accountId, pageNumber, 
                res.search_results, 
                res.resultRows, res.pageSize, res.resultPages)
                this._agentListData$.next(serverResponse);
            },
           (err: HttpErrorResponse) => {
                console.log('handling error')
           }
    );

    // then call next()
    this.$filter.next(requestUrl)
}

That’s probably it. Unless, this.$filter is a BehaviorSubject or ReplaySubject, then we may have a different problem.

Answer 2

basic example:

export class MyComponent{
    private $filter: Subject<string> = new Subject<String>();

    constructor(){
        this.$filter
          .switchMap(filter => this.backEndCommService.getData(filter + this.baseUrl)
          .subscribe(res => {//do something})
    }

    getAgentList(filterValue: string){
        this.$filter.next(filterValue);
    }

}

To use switchmap to cancel previous request we need a hot observable which outputs our filter value. We use a subject for that. Everytime we get a new value from somewhere? we push it to the subject.

Answer 3

tried and it even did not got out to the server

getAgentList(pageNumber: number, filter: string): any {
    let requestUrl: string = 'api/service/agents_search?ACCT=' 
  +this.accountId;
    if (filter) {
        requestUrl = requestUrl + '&filter=' + filter;
    }
    if (pageNumber) {
        requestUrl = requestUrl + '&pageNumber=' + pageNumber;
    }
    this.$filter.next(requestUrl)

    this.$filter.switchMap(requestUrl => 
    this.backEndCommService.getData(requestUrl))
            .subscribe(
                (res: any) => {
                    let serverResponse: ServerResponse = new 
                    ServerResponse(this.accountId, pageNumber, 
                    res.search_results, 
                    res.resultRows, res.pageSize, res.resultPages)
                    this._agentListData$.next(serverResponse);
                },
               (err: HttpErrorResponse) => {

            console.log('handling error');
      });
}

this line switchMap(requestUrl => this.backEndCommService.getData(requestUrl)) did not made the call and fall silently.....mmmm