RxJs наблюдаемые

Наблюдаемые объекты реактивного Javascript похожи на промисы в том смысле, что они оба являются объектами, представляющими возможное завершение (или сбой) асинхронной функции. Но в своем исполнении, способности обрабатывать несколько событий и функциях наблюдаемые объекты обладают гораздо более интересной функциональностью.

Настраивать

// CDN <script src="https://npmcdn.com/@reactivex/rxjs@version/dist/global/Rx.umd.js"></script>
// in console
npm install rxjs-es
// in javascript
import { Observable} from 'rxjs/Observable'

Создание, выполнение и несколько событий

const simpleObs = Rx.Observable.create(callback)
const fromEvent = Rx.Observable.fromEvent(target, eventName)
const fromProm = Rx.Observable.fromPromise(promise)

В своей простейшей форме наблюдаемая создается с помощью метода create. В противном случае здесь доступен ряд операторов создания.

В то время как промисы используют нетерпеливое выполнение, наблюдаемые используют ленивое выполнение. То есть вместо того, чтобы выполняться немедленно, наблюдаемое будет выполняться только тогда, когда это необходимо. Кроме того, обещание может отвечать только за одно событие, а наблюдаемое может обрабатывать ноль или более событий.

устранение дребезга

Rx.Observable.fromEvent(target, 'keyup')
  .debounceTime(500)
  .subscribe(event => console.log(event.target)

В этом случае наблюдаемая будет отслеживать каждую эмиссию, но будет испускать только самый последний элемент после того, как заданный промежуток времени прошел без другой эмиссии.

Дросселирование

Rx.Observable.fromEvent(target, 'mousemove')
  .throttleTime(500)
  .subscribe(event => console.log(event.x, event.y)

Как и устранение дребезга, регулирование ограничивает частоту выдачи значений. Он будет продолжать собирать выбросы, но будет излучать только один раз за установленный промежуток времени.

Отмена

let obs = Rx.Observable.create(callback)
// somewhere else 
obs.unsubscribe()

Вы можете отменить наблюдаемое, отписавшись от него.

Обработка ошибок

Rx.Observable.fromPromise($.get('https://bad.api')
  .catch(err => {
    return Rx.Observable.fromPromise(fetch('https://good.api'))
  })
  .subscribe(res => console.log(res), err => console.log('error!'))

Обработка ошибок позволяет настроить резервный вариант.