83 RX – from – promise

Pubblicato il di

In questa lezione vedremo come trasformare una promise in uno stream di dati utilizzando sempre il from.

Creiamo un nuovo file promise.js e importiamo il from

const {from} = require('rxjs');

andiamo su json place holder per recuperare il codice

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())

Il codice usa la libreria fetch che effettua una chiamata AJAX al’url che grazie al metodo then di fetch trasforma i dati in json. Questi dati che arrivano come promise, li trasformeremo poi col from.

Vediamo subito l’esempio con salvando l’url di albume

const apiurl = 'https://jsonplaceholder.typicode.com/albums';

Ora vediamo come effettuare una chiamata AJAX con node.js utilizzando e installando la libreria node-fetch, ricordate di andare sulla directory principale RXJS

npm install node-fetch

nel file package.json ora abbiamo

"node-fetch": "^2.6.0",

importiamo questo pacchetto nel nostro progetto

const fetch = require('node-fetch');

ora passiamo alla chiamata col fetch che restituisce il body

const promise = fetch(apiurl)

concateniamo il metodo then che trasforma il body che arriva dal fetch in JSON e restituisce una promise

const promise = fetch(apiurl).then(body => body.json())

aggiungiamo un ultimo then per mandare i dati in console

const apiurl = 'https://jsonplaceholder.typicode.com/albums';
const {from} = require('rxjs');
const fetch = require('node-fetch');

const promise = fetch(apiurl).then(body => body.json())
.then(res => console.l

Ora possiamo controllare che i dati vengano passati. Questi dati restituiti dalla promise vengono passati sotto forma di array. Ora utilizzando il from trasformiamo questa promise in un flusso di dati. Prima di tutto commentiamo l’ultimo then usato prima per prova, perchè non ci serve una promise risolta.

const promise = fetch(apiurl).then(body => body.json())
//.then(res => console.log(res));

from(promise).subscribe(res => console.log(res));

switchMap

adesso col subscribe del from otteniamo lo stesso risultato di prima: un array di dati. Ma noi vogliamo che i dati vengano separati, ora abbiamo un array con dentro molteplici oggetti, noi vogliamo tanti oggetti separati, una destrutturazione. Ricorriamo al metodo pipe con l’operatore switchMap che permette di cambiare lo stream da un flusso all’altro. Ma prima includiamo il switchMap

const {switchMap} = require('rxjs/operators');

Quindi abbiamo questo stream from promise che ritorna un array

from(promise)

Vogliamo cambiare il tipo di stream utilizzando il switchMap che riceverà i dati sotto forma di array e li trasformerà con un ulteriore from in tanti oggetti separati

from(promise).pipe(
    switchMap( resData => from(resData))

Lanciando il codice completo

from(promise).pipe(
    switchMap( resData => from(resData))
).subscribe(res => console.log(res));

non avremo i dati contenuti in un unico oggetto, ma verranno separati in tanti oggetti distinti.

Possiamo anche utilizzare un altro metodo tramite il costrutto rxjs of

const {from, of} = require('rxjs');

of al contrario di from non riceve un array, ma elementi singoli, per spiegarlo meglio inserisco questa schematizzazione come commento

// from ([1,2,3,4])

from riceve un array di dati e li trasforma in uno stream di dati separati, ad uno ad uno

// of (1,2,3,4)

of deve ricevere questi elementi separati come parametri e poi li trasforma come il from in stream di dati separati. Per trasformare questo array in dati singoli utilizzeremo lo spread operator

// of(...[1,2,3,4])

ecco il codice che funziona ugualmente con of

from(promise).pipe(
    switchMap( //resData => from(resData)
        resData => of(...resData) )
).subscribe(res => console.log(res));

Quindi of è da utilizzare riceviamo elementi singoli di qualunque tipo, mentre from quando riceviamo un array o un elemento iterabile tipo un oggetto interface che implementi l’iterable.