The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Reactive Programming - Async requests and responses in RxJS

Reactive Programming - Async requests and responses in RxJS

7:14
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.
Watch this lesson now
Avatar
egghead.io

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.

Avatar
Kevin

I don't understand why jQuery.getJSON was demonstrated, but not a plain 'ol xhr object;

Doesn't RxJS have a shorthand methods to handle AJAX requests, or I'm mistaking that capability only with something that Rx.DOM has (I know Rx.DOM does w/ things like Rx.DOM.get & RxDOM.jsonRequest; I don't know if Rx without Rx.DOM has 'em since 3.0?

I thought it was just demonstrated to also show it's possible w/ jQuery & to show off RxJS's fromPromise helper method, but realized a plain 'ol

In reply to egghead.io
Avatar
Joel

I'd push JQ out of your mind, as it is an unimportant detail 😜

It could be fetch, axios, etc...

In reply to Kevin
Avatar
Dean

Great job on the RxJS Tutorials.. I'd love to see some real practical examples for MySQL implementations...

In reply to egghead.io
Avatar
jvcjunior

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'));

?

Avatar
Andre

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.

In reply to jvcjunior
Avatar
Rafael

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.

Avatar
Kostiantyn

How can I combine interval & request to the server with Observable? Could someone provide a hint?

Avatar
Andre

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)

In reply to Kostiantyn
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?