1

Buen día colegas, soy nuevo con todo esto de JavaScript y Angular así que ojalá me comprendan y me tengan paciencia; resulta que estoy utilizando servicios para hacer la petición a una ruta, hago dos peticiones consecutivas a la misma ruta pero pasándole parámetros distintos, cuando me retorna la respuesta en formato json dicha respuesta retorna de forma incompleta, me explico mejor con código:

Sevicio

getOne(table, id){
    let params = 'table=' + table;
    let headers = new HttpHeaders(GLOBAL.header);
    return this.httpClient.post(GLOBAL.url + 'one/' + id, params, {headers:headers});
}

Componente

ngOnInit(){
   this.getTable();
   this.headStructure = this.getOne(this.headTable);           //Primera petición
   //await new Promise(f => setTimeout(f, 500));
   this.detailStructure = this.getOne(this.detailTable);       //Segunda petición (a la misma ruta 
                                                               //pero con diferente parámetro)
}

getOne(table){
   this.anyService.getOne(table).subscribe(
      res => {
          console.log(res);
      },
      err {
          console.log(err);
      });
}

Ahora bien, el código está resumido para que nos podamos centrar en la problemática, el problema es que tanto la primera como la segunda petición me retornan aquí console.log(res) un archivo json incompleto a menos que utilice esta línea de código

//await new Promise(f => setTimeout(f, 500)); 

la cual supongo que hace un break de 0.5 segundos entre una petición y otra; la otra opción que también me resultó es utilizar la opción toPromise() en el servicio así this.detailStructure = this.getOne(this.detailTable).toPromise(); y omitir el subscribe en el componente, mi duda es si estoy actuando de forma correcta ante esta situación o existe una forma más elegante y efeciva de hacerlo, sé que todo esto tiene que ver con una cuestión de peticiones asíncronas, Observables, Promesas, async/await etc.; no niego que he encontrado mucha información al respecto pero no termino de entender toda esta cuestión, mi esperanza es que con este ejemplo quizás puedan blanquear un poco mis dudas, desde ya muchas gracias, saludos cordiales.

2
  • de donde sacas los valores de this.headTable y this.detailTable y que hace this.getTable si getTable es otra llamada al server y es la que setea los valores de las variables que pasas a las peticiones ahi puede estar el problema.
    – hawks
    el 5 jul. 2021 a las 14:35
  • Buenas colega, muchas gracias por tomarte tu tiempo en responder, la función getTable es simplemente una función local que parte un string, no hace ninguna petición al server, de todos modos ya he encontrado la solución siguiendo las indicaciones del posteo de abajo, muchas gracias, saludos.
    – César
    el 5 jul. 2021 a las 20:33

1 respuesta 1

1

Estas trabajando con observables, que básicamente son operaciones asincronas. La clave en los observables es crear una subscripción para obtener los datos. (Como ya lo estas haciendo). El problema esta en que para esperar que una se resuelva lo debes hacer dentro del subscribe, no despues.

let errorCallback = err => {
  console.log(err);
}

this.anyService.getOne(this.headTable).subscribe(
  head => {
    this.headStructure = head
    this.anyService
      .getOne(this.detailTable)
      .subscribe(detail => {
        this.detailStructure = detail
      }, errorCallback)
  }, errorCallback);

Explicación TL;DR


Al ser operación asincrona cuando se ejecuta el observable, el callback del subscribe no se dispara hasta que se obtenga una respuesta. No sabemos cuando suceda esto por que te estas comunicando con otro equipo (en este caso), así que para asegurar que funcione tienes usar uno de los varios métodos que tenemos para esto como son las promesas, los observables y async/await. En esencia actúan igual, pero cada uno tiene bondades y contras. Con angular son los observables, la mayoría de su arquitectura esta pensado en ellos.

Mientras se espera la respuesta en el observable, nuestro programa se sigue ejecutando. De ahí que tengas respuestas parciales o incompletas si no esperas un tiempo.

1
  • Esto me solucionó el inconveniente, apliqué tu recomendación y funcionó a la perfección, muchas gracias por brindarme tu valioso tiempo, saludos.
    – César
    el 5 jul. 2021 a las 20:37

Tu Respuesta

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

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