1

Tengo que hacer varias peticiones HTTP al servidor de manera síncrona, es decir no puedo hacer la segunda petición HTTP sin antes haber obtenido el valor de la primera petición, ¿Cual es la mejor opción para realizar dicha petición?

Dejo el ejemplo aquí:

  seccionIncidencia: SeccionIncidencia[];
  empleado: Empleado;
  secciones: string[] = [];
  centros: string[] = [];

ngOnInit() {
    this.seccionIncidenciaService.getSeccionIncidencias().subscribe(seccionHttp => {
      this.seccionIncidencia = seccionHttp;
      this.initSeccion();
      this.getEmpleado();
      this.getCentros();
    });

  }

  initSeccion() {
    this.secciones = Array.from(new Set(this.seccionIncidencia.map(t => t.nombre)));
  }

  getEmpleado() {
    this.empleadoService.getEmpleado(78).subscribe(empleadoHttp => {
      this.empleado = empleadoHttp;
    });
  }

  getCentros() {  
this.centroService.getCentro(this.empleado.id_centro).subscribe(centroHttp => {
      this.centros.push(centroHttp.denominacion_interna);
    });
  }
3
  • En los .services he utilizado los Observables y he leido acerca de flatmap y switchmap pero no se si es lo correcto para lo que yo quiero hacer.
    – Arkhan6
    Commented el 26 dic. 2018 a las 10:00
  • Me he liado un poco leyendo tu pregunta: El título dice asíncrona, luego en el texto pones síncrona, diciendo que no puedes hacer una llamada hasta que otra termine, pero no veo las dependencias (¿ese 78 es una prueba?). ¿Puedes explicar un poco más detalladamente tu escenario? Commented el 26 dic. 2018 a las 10:30
  • Gracias por avisarme de la errata, el 78 es un identificador del empleado que mando, por reducir el código. Lo primero que necesito saber es el listado de incidencias, después obtengo los datos del empleado y necesito saber a que centro pertenecen, el problema viene cuando voy a obtener lo nombres de los centros, si no he recibido los datos del empleado cuando voy a obtener el nombre de los centros si no tengo el ID de centro de Empleado me devuelve nombre de centros undefined
    – Arkhan6
    Commented el 26 dic. 2018 a las 10:43

1 respuesta 1

1

La solución es usar switchMap, como ya comentas en en la pregunta:

  ngOnInit() {
    this.seccionIncidenciaService.getSeccionIncidencias().pipe(
      switchMap(seccion => {
        this.seccionIncidencia = seccion;
        this.initSeccion();
        return this.empleadoService.getEmpleado(.../*empleado obtenido de la seccion*/);
      }),
      switchMap(empleado => {
        this.empleado = empleado;
        return this.centroService.getCentro(this.empleado.id_centro);
      })
     ).subscribe(centro => this.centros.push(centroHttp.denominacion_interna));

  }

  initSeccion() {
    this.secciones = Array.from(new Set(this.seccionIncidencia.map(t => t.nombre)));
  }

De este modo vas transformando los resultados de un observable en un nuevo observable, hasta obtener todos los datos.

Nota: Estoy asumiendo angular 6 o posterior, donde se usa RXJS 6.X

1
  • Muchas gracias por la solución, voy a intentar mejorarla porque ahora necesito obtener el centro de 'this.empleado.id_centro' y 'this.empleado.id_centro2'
    – Arkhan6
    Commented el 28 dic. 2018 a las 12:24

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.