CODEWITHSUNDEEP
angularrxjshttprequestobservableswitchmap
Shaul Naim
Shaul Naim

Reputation: 276

how to use switchMap to cancel pending http requests and taking the last subscribe only?

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

Upvotes: 4

Views: 8577

Answers (3)

Robin Dijkhof
Robin Dijkhof

Reputation: 19278

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.

Upvotes: 9

Clarence Lee
Clarence Lee

Reputation: 141

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.

Upvotes: 0

Shaul Naim
Shaul Naim

Reputation: 276

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

Upvotes: 0

Related Questions