In this lesson we start building a small UI widget: suggestions box displaying users to follow in Github. We will learn how to perform network requests to a backend using RxJS Observables.
Could this part of the code: var responseStream = requestStream .flatMap(requestUrl => Rx.Observable.fromPromise(jQuery.getJSON(requestUrl)) );
be replaced by: var responseStream = Rx.Observable.fromPromise(jQuery.getJSON('https://api.github.com/users'));
Hi jvcjunior. It would probably behave the same, but it's still different because the requestStream may emit many URLs over time, not just one hard-coded URL.
I'm leaving here an example of this using RxJS v5.0.0-beta.10
import Rx from 'rxjs/Rx'; import fetch from 'fetch-jsonp'; const fetchEndpoint = url => fetch(url) .then(response => response.json()) .then(response => response.data); const request$ = Rx.Observable.of('https://api.github.com/users'); const response$ = request$ .flatMap(url => Rx.Observable.fromPromise(fetchEndpoint(url))); response$.subscribe((response) => console.log(response));
Please let me know if you see a problem with this implementation.
How can I combine interval & request to the server with Observable? Could someone provide a hint?
Hi Kostiantyn, you could accomplish that with another flatMap or with combineLatest. Here is how you could do it with flatMap (or a variant like switchMap/flatMapLatest):
var responseStream = Rx.Observable.interval(1000) .switchMap(i => requestStream) .switchMap(requestUrl => Rx.Observable.fromPromise($.getJSON(requestUrl)))
(switchMap is from RxJS v5. flatMap and flatMapLatest are from RxJS v4)
Very well explained.