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

拜拜、爱过 提交于 2019-12-02 08:31:49

问题


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


回答1:


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.




回答2:


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




回答3:


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.



来源:https://stackoverflow.com/questions/49152025/how-to-use-switchmap-to-cancel-pending-http-requests-and-taking-the-last-subscri

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!