PDF de programación - RxJS Ajax , fusionando peticiones asíncronas

RxJS Ajax , fusionando peticiones asíncronas

El uso de RxJS Ajax para realizar peticiones asíncronas cada día es más común. ¿Cómo
podemos realizar peticiones Ajax con RxJS y gestionar invocaciones complejas?. Vamos a
verlo , el primer paso va a ser configurar un pequeño servidor de Node.js con Express.js
como framework de servidor. El primer paso es usar npm e instalar express.js.

npm install express –save

Una vez instalado el framework express vamos a ver el código que vamos a usar del lado de
servidor.

var express = require('express');
var app = express();

app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers",
"Origin, X-Requested-With, Content-Type, Accept");
next();
});

var persona={nombre:"juan",edad:20};
var persona2={nombre:"gema",edad:30};

app.get('/persona1', function (req, res) {
setTimeout(function() {

res.send(persona);
},2000)

RxJS Ajax , fusionando peticiones asíncronas

});

app.get('/persona2', function (req, res) {
setTimeout(function() {
res.send(persona2);

},4000)

});

app.listen(3000, function () {
console.log('Example app listening on port 3000!');
});

En este caso simplemente estamos publicando dos urls . La primera url es la de /persona1
que nos envía los datos pasados 2 segundos. La segunda url es /persona2 que nos envía los
datos de la segunda persona al pasar 4 segundos.

Vamos a ver como podemos recoger los datos e imprimir el nombre de la persona que tiene
una edad mayor que 20 por la consola. El primer paso es realizar es crear una pagina web
que tenga dos botones.

RxJS Ajax , fusionando peticiones asíncronas

function pulsar() {
// modificamos y ponemos Rx.Observable.ajax
Rx.Observable.ajax({ url: 'http://localhost:3000/persona1',
responseType: 'json'})
.subscribe(function (data) {
//añadimos la propiedad response y saldra por la consola
console.log(data.response);
});

Rx.Observable.ajax({ url: 'http://localhost:3000/persona2',
responseType: 'json'})
.subscribe(function (data) {
//añadimos la propiedad response y saldra por la consola
console.log(data.response);
});
}

Una vez hemos construido este código la extensiones Rx harán su función y realizaran las
peticiones Ajax. Las cuales veremos su resultado impreso por la consola.

El problema es que cada una de las peticiones se ejecuta y se resuelve en tiempos
diferentes. A nosotros nos vendría bien ejecutar ambas y cuando hayan terminado obtener
un resultado por pantalla. Esto con jQuery clásico se resuelve con promesas. Vamos a ver
como lo resolvemos con Rxjs.

RxJS Ajax , fusionando peticiones asíncronas

function pulsar3() {

var observable1=Rx.Observable.ajax({ url:
'http://localhost:3000/persona1', responseType: 'json'})
var observable2=Rx.Observable.ajax({ url:
'http://localhost:3000/persona2', responseType: 'json'})
Rx
.Observable
.forkJoin(observable1,observable2)
.flatMap(x=>x)
.map(x=>x.response)
.subscribe(function(datos) {
console.log(datos);
})

El resultado sera muy parecido con la diferencia que los datos saldrán a la vez:

¿Cómo funciona el código exactamente?

forkJoin: Este método fusiona ambas peticiones Rest y nos devuelve un array con los
resultados finales.

RxJS Ajax , fusionando peticiones asíncronas

flatmap: Una vez tenemos el array de resultado ejecutamos flatmap. Esta instrucción
convierte el array de respuestas en dos observables diferentes.

map: Utilizamos la función map para extraer de la respuesta los datos json que vienen en la
propiedad de response.

Ya tenemos los datos completamente transformados usamos el método subscribe y los
imprimimos por la consola.

¿Como podríamos imprimir los mayores de 30 años? . Sería suficiente con modificar el flujo
de datos y añadir una función de filter.

RxJS Ajax , fusionando peticiones asíncronas

Rx
.Observable
.forkJoin(observable1,observable2)
.flatMap(x=>x)
.map(x=>x.response)
.filter(x=>x.edad>=30)
.subscribe(function(datos) {
console.log(datos);
})

Saldrá gema por la consola:

Tener un conocimiento fuerte de el manejo de Observables va a ser un tema fundamental en
el futuro diseño de arquitecturas. Acabamos de ver un ejemplo de RxJS Ajax.

Otros artículos relacionados:

1.
2.
3.
4.

Usando Rx Observables en JavaScript
JavaScript Deferred Objects y peticiones asíncronas
JavaScript Promise y la programación asíncrona
Rx.js documentación