Issue with http call being cancelled by chrome

Viewed 154

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 ?

0 Answers
Related