I have a rxjs pipeline with two http calls and I have an issue with chrome cancelling one of my http requests..
Here is the rxjs pipeline and the corresponding html:
from the component:
userCtrl = new FormControl();
...
private initAutocomplete() {
const existingIds$: Observable<number[]> = this.contactService
.search()
.pipe(
map(contacts => contacts.map(c => Number(c.user.uid)))
);
this.userSearchResults$ = this.userCtrl
.valueChanges
.pipe(
startWith(''),
filter((name: string) => name.length > 2),
mergeMap((name: string) =>
this.contactService.autocomplete(this.buildSearchParams(name))
.pipe(
//Causes a canceled http request!!
withLatestFrom(existingIds$),
map(([searchItems, existingIds]: [UserSearchItem[], number[]]) =>
searchItems.filter(
(value: UserSearchItem) => !existingIds.includes(value.id))
)
)
)
);
}
from the html
<mat-autocomplete #auto="matAutocomplete">
<mat-option
*ngFor="let user of userSearchResults$ | async"
[value]="user.fullname"
(onSelectionChange)="handleSelect(user)"
>
{{ user.fullname }}
</mat-option>
</mat-autocomplete>
from the service:
autocomplete(params: UserSearchParams): Observable<UserSearchItem[]> {
return this.http.post<UserSearchItem[]>(`${this.apiPrefix}/user/autocomplete`, params);
}
search(): Observable<Contact[]> {
return this.http.post<Contact[]>(`${this.apiPrefix}/bookmarks_user/search`, {});
}
Can someone please tell me how to find out what could cause my search request to be cancelled by chrome ?