问题
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