How to cancel a http.post() while it is waiting for a response?

I think you should use a takeUntil(searchEmptyTrigger).

this.http.post('https://esi.evetech.net/latest/universe/names/?datasource=tranquility', characterIndexes)
        .pipe(takeUntil(searchEmptyTrigger)) // make sure to cancel the post if `searchEmptyTrigger` emits
        .subscribe( (charactersInfo: any[]) => {
           // do some stuff with this.characterIndexes and this.characters = [];
        });

PS, you could totally simplify your whole code into much less code.

Stay away from having subscription inside another subscription, like your post request.

You can merge them by using operators. I'm lazy to write it all, :d

Try this way ...

Example : The concept is to unsubscribe the observable object...

const request = this.searchService.search(this.searchField.value)
  .subscribe(
    result => { this.result = result.artists.items; },
    err => { this.errorMessage = err.message; },
    () => { console.log('Completed'); }
  );

  request.unsubscribe();  // <-- Hear you can cancel the API request.. 
  //Just set in when you need to cancel. It will works fine. 
  // E.x use with timeout or delay option of observable. 
}

I think I figured it out. I will try to explain what went wrong first, after that I ll go over my solution.

The problem

In the question's code there was a problem. Before a new value was emitted, I would have already performed a http-request in the searchTrigger, but not in the searchTriggerEmpty. Therefore searchTrigger could be emitted after searchTriggerEmpty even tough searchTrigger had been initiated first.

The solution

The solution was to fix the emitting order. To do that the event would have to be emitted before any requests are made. And when a new event is being triggered the previous event should be cancelled ( switchMap-behavior ).

Code explained

• The searchTrigger emits events when someone types in the searchBox.
• Some pipes are added. debounceTime( 500 ) and distinctUntilChanged() prevent the event from triggering too often.
• The map pipe returns the value types in the searchBox.
• The switchMap has a conditional statement inside it. This is where the best way to proceed is chosen.
• If the string is longer than 2 characters it will return an observable of an array of characterIndexes (it gets these by doing some http-requests and processing them).
• If the string is shorter than 2 characters it will directly return an empty array.
• The reason for using a switchMap here is that a currently pending process will be cancelled when a new value is being emitted.
• By subscribing to searchTrigger we can now process the latest search results.
• I also provided the function I used for process_searchString() so you have a better idea what it does / returns.

Code

let searchBox = document.getElementById('search-box');
let searchTrigger = fromEvent(searchBox, 'input')
.pipe(
  debounceTime( 500 ),
  distinctUntilChanged(),
  map((event: any) => event.target.value ),
  switchMap( searchString => {
    if( searchString.length > 2 ){
      return this.process_searchString( searchString );
    } else if ( searchString.length <= 2 ) {
      return of( [] );
    }
  }),
);

searchTrigger.subscribe( ( characterIndexes: number[] ) => {
  this.characterIndexes = characterIndexes;
  this.characters = [];
  if( characterIndexes.length > 0 ){
    this.load_10characters();
  }
});

Disclaimer: At the moment of writing this I just learned to use rxjs. So if you see anything that should be improved drop in a comment.

PS: For those interested this video explains the switchMap better than I can ( and is entertaining too ): https://www.youtube.com/watch?v=rUZ9CjcaCEw

Extra process_searchString():

  private process_searchString( searchString: string ): Observable<number[]>{
    return new BehaviorSubject( searchString )
    .pipe(
      concatMap( ( text: string ) => this.request_characterSearch( text ) ),
      concatMap( ( response: any ) => {
        if( response.character ){
          return this.request_characterNames( response.character )
        } else {
          return of([]);
        }
      }),
      map( (charactersInfo: any[]) => this.sort_alphabetically( charactersInfo ) ),
      map( (charactersInfo: any[]) => charactersInfo.map( characterinfo => characterinfo.id ) ),
    );
  }