El operador map
es un transformador, lo que hace es que toma el valor que le toca en la cadena de operadores en el pipe
y devuelve un nuevo valor basado en ese, el cuál podría ser el valor de entrada de otro operador o ser el valor final.
Supongamos que obtienes un número 2 en tu API:
this.http.get(this.url).pipe(
map(n => { return n * 2}), // 2*2=4
map(n => { return n * 4}) // 4*4=16
)
El valor al final sería 16, porque el valor original se fue transformando a través de los map
. Por eso mismo, tú lo estarias usando mal, porque lo que te interesa es crear un efecto secundario a partir del valor que viene en la respuesta HTTP, no transformar esa respuesta misma.
Podrías usar el operador tap
en su lugar, cuyo objetivo es exactamente lo que deseas hacer: Utilizar el valor de respuesta sin transformarlo.
this.http.get(this.url).pipe(
tap(n => { console.log(n * 2)}), // 2*2=4
tap(n => { console.log(n * 4)}) // 2*4=8
)
Por supuesto map
te está funcionando, como podría hacerlo filter
o tantos otros operadores que existen en rxjs, pero es mejor usar tap
ya que para eso fue creado.
Ahora, por otro lado, podrías lograr lo mismo de otras maneras que tendrían mas sentido. Por ejemplo:
- Suscribirte al Observable devuelto por
this.http.get()
te daria los mismos resultados... Pero tendrias que manejar el ciclo de vida de la suscripción.
- Tambien podrías usar
this.http.get(this.url).toPromise()
y manejarte como si fuera un Promise... Pero sería nadar en redundancia.
- Usar
async pipe
. Recomiendo firmemente esta opcion, porque es simple, no tienes que manejar el ciclo de vida del Observable y tu código lucirá mejor. Cómo usar async pipe