2

Estoy intentando hacer con Angular algo tan sencillo como realizar una consulta http y con el valor que me devuelve usarlo para otra consulta http.

Estoy utilizando httpClient y RXJS, de manera que he creado un servicio que hace las consultas http y luego lo llamo desde una pagina para algo tan sencillo como realizar una consulta http y con el valor que me devuelve usarlo para otra consulta http. Segun he visto en muchos tutoriales hay que suscribirse al Observable que me devuelve httpClient, pero al ser asincrono no puedo saber nunca si la primera consulta ha terminado antes de que se ejecute la segunda.

No se si me he explicado muy bien, pongo el codigo porque lo que quiero hacer es realmente sencillo pero por mas vueltas que le dou no se como solucionarlo con los metodos asincronos de RXJS, los observables, las suscripciones a los observables y todo este lio.

Ya he mirado un monton de tutoriales pero no veo en ninguno que me diga como esperar a que termine la primera llamada a una pagina web con httpclient para ejeuctar la segunda.

Supongo que estoy liado y se me ha cerrado la mente, porque no puede ser tan dificil hacer esto en angular ...

Este es el codigo del servicio para las llamadas a las paginas web:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class miServicio {

  constructor(private  httpClient: HttpClient) {  }


  /***********************************************/
  /* lllamada a API WEB                          */
  /* para obtener listado de noticias de un tema */
  /***********************************************/
  public  obtenerNoticiasPorTema(idTema: string): Observable<any> {

    return  this.httpClient.get<Noticias[]>('https://localhost:8081/api/noticias/' + idTema);

  }

  /***********************************************/
  /* lllamada a API WEB                          */
  /* para obtener tema                           */
  /***********************************************/
  public  obtenerTema(): Observable<any> {

    return  this.httpClient.get<Aplicacion>('https://localhost:8081/api/tema');

  }


}

Aqui esta el codigo simplificado desde el que llamo al servicio desde mi pagina, nunca consigo que termine de ejecutarse this.servicioClikear.obtenerTema() antes de que se ejecute this.servicioClikear.obtenerNoticiasPorTema(idTema)

import { Component, OnInit, ViewChild } from '@angular/core';
import { miServicio } from 'src/app/bd/miServicio.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-blog',
  templateUrl: './blog.page.html',
  styleUrls: ['./blog.page.scss'],
})
export class BlogPage implements OnInit {

 constructor(private oMiServicio: miServicio, private router: Router) {
 }


 ionViewWillEnter(){

    let idTema: string = "";

    this.servicioClikear.obtenerTema()
    .subscribe(resultado => {
        idTema = resultado;
    });

    this.servicioClikear.obtenerNoticiasPorTema(idTema)
    .subscribe(noticias => {
        console.log(noticias);
    });

 }

}

Cualquier ayuda sera bien recibida, llevo mucho tiempo intentando encontrar una solucion, y seguro que es algo m uy sencillo, pero no encuentro manera y he probado muchas cosas.

2 respuestas 2

2

siempre puedes hacer lo siguiente (quick and dirty

ionViewWillEnter(){

    let idTema: string = "";

    this.servicioClikear.obtenerTema()
    .subscribe(resultado => {
        // si este código se esta ejecutando significa que el request termino 
        // por lo que puedes ejecutar el código que esta "esperando" al request en cuestion
        idTema = resultado;
            this.servicioClikear.obtenerNoticiasPorTema(idTema)
            .subscribe(noticias => {
                console.log(noticias);
            });
    });
 }

Una solución mas orientada a mejores prácticas sería así:

ionViewWillEnter(){

    let idTema: string = "";

    this.servicioClikear.obtenerTema().pipe(
        switchMap(
            response => {
                idTema = resultado;
                return this.servicioClikear.obtenerNoticiasPorTema(idTema);
            }
        ),
        catchError(
            error => console.error(error)
        )
    ).subscribe(
        noticias => console.log(noticias)
    )
}

Qué hace switchMap?

una vez termina el primer request, puedes ejecutar código o incluso usar el resultado de este request para ser usado en un segundo request, switchMap requiere que retornes otro Observable, este segundo Observable puede ser otro request y puedes poner un sin fin de switchMap con el fin de encadenar una serie de request que requieren de uno previo para funcionar, por ejemplo:

this.servicioClikear.obtenerTema().pipe(
    switchMap(
        temas => {
            console.log(temas);
            return this.servicioClikear.obtenerNoticiasPorTema();
        }
    ),
    switchMap(
        noticias => {
            console.log(noticias);
            return this.servicioClikear.obtenerArticulosPorNoticia();
        }
    )
).subscribe(
    articulos => console.log(articulos);
)

Notar que el resultado final del subscribe es el del último switchMap

te recomiendo el siguiente sitio para aprender de Rxjs : Learn Rxjs

allí encontrarás muchas cosas de utilidad como pipe, map, swithMap, mergeMap, forkJoin, etc.

7
  • He leido en muchos tutoriales que no se deben anidar Observables Commented el 2 feb. 2021 a las 16:03
  • No sigas leyendo esos tutoriales. Es un recurso importante. Si bien una cantidad grande de anidaciones puede volver confuso el código, para el caso, es muy simple resolverlo asi.
    – Legna
    Commented el 2 feb. 2021 a las 16:08
  • bueno si no es recomendable, te ofrecí una solución quick and dirty pero si quieres algo mejor ahí la puedo mejorar
    – LPZadkiel
    Commented el 2 feb. 2021 a las 16:10
  • Haría falta un .unsubscribe() para una mayor optimización del código y evitar leaks de memoria
    – KBeDev
    Commented el 2 feb. 2021 a las 16:25
  • pues eso también estaría bueno que lo supiese
    – LPZadkiel
    Commented el 2 feb. 2021 a las 16:28
0

Los Observables de RxJS poseen la función toPromise(), que es lo que estás buscando si lo que necesitas es llamarlo desde una función asíncrona

Ejemplo:

const noticias = await this.servicioClikear.obtenerNoticiasPorTema(idTema).toPromise() // Esto retornará un Promise<tipoDelDato>

tipoDelDato es el tipo del dato que retorna la consulta, puede ser utilizado como any si el tipo de está definido o si simplemente necesitas que sea más flexible a lo que retorna el endpoint.

El flujo sería, simplificado, así:

this.servicioClikear.obtenerNoticiasPorTema(idTema) retornaría un Observable<any>, ejecutamos toPromise() y pasa a retornar Promise<any>


Actualización

Para sincronizar los observables con toPromise() puedes hacer lo siguiente:

async ionViewWillEnter(): Promise<void> {
    let idTema = ''; // El tipo se asume implícitamente de la asignación del dato

    const idTema = await this.servicioClikear.obtenerTema().toPromise();
    console.log('ID Tema ->', idTema);

    const noticias = await this.servicioClikear.obtenerNoticiasPorTema(idTema).toPromise();
    console.log('Noticias ->', noticias)
}
3
  • Mi problema es que al ser funciones asincronas casi siempre me llega el valor de la variable idTema vacio porque no le ha dado tiempo a responder a la pagina web para obtener el valor. Es decir que cuando se ejecuta this.servicioClikear.obtenerNoticiasPorTema(idTema).subscribe al ser asincrono todavia no he recibido el valor de la funcion asincrona this.servicioClikear.obtenerTema().subscribe() disculpas si no me explico , es mas dificil explicarlo que realmente lo que hay que hacer Commented el 2 feb. 2021 a las 16:00
  • En ese caso, puedes validar que idTema tenga un valor asignado/esperado antes de ejecutar this.servicioClikear.obtenerNoticiasPorTema(idTema)
    – KBeDev
    Commented el 2 feb. 2021 a las 16:03
  • Los Observables son una forma recomendada (y genérica) de manejar eventos en Angular, pero no son la única forma de hacerlo. Además, a diferencia de las promesas, los observables responden a funciones callback, mas no soportan características del lenguaje como lo es await. Por lo que, para sincronizarlo, puedes usar la respuesta de @LPZadkiel, aunque no es recomendable por usar observables anidados. o bien, usar toPromise()
    – KBeDev
    Commented el 2 feb. 2021 a las 16:12

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.