slides.com/rebootjeff/observables
A top-down approach to learning observables
by @RebootJeff
var observable = Rx.Observable.create((observer) => {
var counter = 0;
var id = setInterval(() => {
if(counter < 9) {
observer.next(counter);
counter++;
} else {
teardown();
observer.complete();
}
}, 1000);
function teardown() {
clearInterval(id);
};
if(global.president === 'Donald') {
observer.error('Game over');
}
return teardown; // invoked when unsubscribing
});
// async logic begins on `.subscribe()`
observable.subscribe({
next: (val) => { console.log(val); },
error: (err) => { console.error(err); },
complete: () => { console.log('done!'); }
});
// we provided an observer
// if we want to cancel...
observable.unsubscribe();
// first, something familiar
promise.then(val => console.log(val))
.catch(err => console.error(err))
.finally(() => console.log('done!'));
Error handling?
Promises
Observables
What if we want type-ahead search results?
Requirements:
(continued)
var searchInput = document.querySelector('#search');
Rx.Observable.fromEvent(searchInput, 'keypress')
.map(event => event.target.value)
.filter(value => value.length > 2)
.distinctUntilChanged()
.debounce(500)
.flatMap((value) => {
return Rx.DOM.request('/api/items?query='+value)
.retry(3);
})
.map(response => response.data)
.forEach(renderSearchResults)
.catch(err => renderError(err.message));
credit: Christian Alfoni
There's a steep learning curve - link