Как реализовать поиск в таблице с использованием RxJS — как именно уходит запрос на сервер?

Основная идея

Поиск в таблице с RxJS строится на реактивном подходе: каждое изменение поля ввода превращается в поток событий. Этот поток фильтруется и трансформируется так, чтобы на сервер уходили только действительно нужные запросы, а ответы обрабатывались без гонок состояний.

Как уходит запрос на сервер

Запрос отправляется не напрямую из обработчика события, а через цепочку операторов RxJS. Сначала поток ввода проходит через debounceTime, который ждет паузы в наборе текста (например, 300 мс), затем distinctUntilChanged отсекает повторяющиеся значения. После этого оператор switchMap принимает текущий поисковый запрос и возвращает новый поток от HTTP-запроса. Если пользователь продолжает печатать, switchMap отменяет предыдущий запрос и запускает новый, что предотвращает устаревшие ответы.

Пример кода

import { fromEvent } from 'rxjs';
import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';

const input = document.getElementById('search');
const tableBody = document.getElementById('table-body');

fromEvent(input, 'input').pipe(
  debounceTime(300),
  distinctUntilChanged(),
  switchMap(event => {
    const query = event.target.value.trim();
    if (!query) return []; // пустой запрос — не отправляем
    return fetch(`/api/search?q=${encodeURIComponent(query)}`)
      .then(res => res.json());
  })
).subscribe(data => {
  renderTable(data); // обновляем таблицу
});

Практическое применение

Такой подход широко используется в интерфейсах с живым поиском, фильтрацией списков и автодополнением. Он снижает нагрузку на сервер, так как запросы отправляются только после паузы в вводе, и гарантирует актуальность данных благодаря отмене устаревших запросов.

Вывод

RxJS позволяет элегантно управлять асинхронными событиями ввода, делая поиск отзывчивым и эффективным. Применяйте этот паттерн, когда нужно реализовать поиск с серверной фильтрацией в реальном времени.