Поисковый запрос с помощью RxJS

Опубликовано в JavaScript, RxJS • 06 августа 2018 г. • 1 мин. на чтение 
Rx.Observable
    .fromEvent(inputElement, 'input')
    .map((event) => event.target.value)
    .debounceTime(500)
    .distinctUntilChanged()
    .do(() => setLoading(true))
    .switchMap(value => fetchData(value))
    .do(() => setLoading(false))
    .subscribe(logToOutput)

// через pipe

fromEvent(inputElement, 'input')
    .pipe(
        pluck('target', 'value'),
        debounceTime(500),
        distinctUntilChanged(),
        tap(() => setLoading(true)),
        switchMap(query => fetchData(query)),
        tap(() => setLoading(false))
    )
    .subscribe(logToOutput)
  • debounceTime - отбрасывает исходящие значения, которые появляются в промежутке меньше заданного времени StackBlitz
  • distinctUntilChanged - пропускает значения только тогда, когда текущее значение отличается от предыдущего. StackBlitz
  • switchMap - завершение (complete) предыдущего потока и создание нового внутри switchMap
  • do/tap - создание побочных действий
  • map((event) => event.target.value) и pluck('target', 'value') - идентичные действия

Похожие записи

HTML атрибуты и DOM свойства

  • Значение HTML атрибута указывает начальное значение;
  • Значение DOM свойства является текущим значением;
  • Атрибуты инициализируют DOM свойства.

RxJS. Delay from array 

import { of, from } from 'rxjs'; 
import { map, concatMap, delay } from 'rxjs/operators';

from([2,4,6,8]).pipe(
  concatMap(item => of(item).pipe(delay(1000)))
).subscribe(console.log);

Добавить css link и js script динамически 

const link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css';
link.integrity = 'sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO'; // необязательно
link.crossOrigin = 'anonymous'; // необязательно
document.head.appendChild(link);

const script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.3.1.slim.min.js';
script.integrity = 'sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo'; // необязательно
s...