2

Tengo una pregunta con respecto a este codigo.

 let results = [1, 2 ,3 4]
 randomArray.forEach( async (e, i) => {
        externalApi(e).subscribe(async ({data}) => {
          results.push(data);
          console.log("result", e);
        }, (error) => {
          console.log(error)
        });
    });

Como se ve estoy iterando sobre un array para obtener multiples resultados de un api y almacenarlos en results, en teoria funciona pero debido a que la llamada al api es una promesa, el results.push(data), no se va a ejecutar inmediatamente, por lo que esperaria 2 cosas.

  1. Que results no tuviese valores al terminar la iteracion
  2. Despues de un tiempo results almacenara los valores obtenidos del api

Esto en teoria ocurre pero obtengo estos resultados:

//console results

$"result, 1"

$"result, 2"

$"result, 2"

$"result, 1"

$"result, 3"

$"result, 4"

introducir la descripción de la imagen aquí

Esto me deja confundido por que, si bien se ejecutando de forma asyncrona el trabajo, parece que la iteracion esta enviando peticiones multiples por cada iteracion o es lo que entiendo.

Es decir, esperaria resultados despues de un tiempo, pero no multiples resultados de lo que creo es solo una iteracion.

En conclusion quisiera saber:

  1. ¿Por que es que sucede esto, hay algo que no estoy entendiendo aqui sobre las funciones async?
  2. ¿Cual es la forma correcta de implementar la respuesta promise dentro de un iterador?
4
  • ¿En qué punto es que ves el resultado que has puesto aquí?
    – VRoxa
    Commented el 19 may. 2020 a las 20:12
  • el resultado varia, despues de un tiempo mi problema es que es que obtengo multiples respuestas por iteracion
    – theboshy
    Commented el 19 may. 2020 a las 20:14
  • Parece que lo que devuelve externalApi es un Observable, ¿cierto?
    – VRoxa
    Commented el 19 may. 2020 a las 20:26
  • parece que si puedo usar el pipe y subcribe
    – theboshy
    Commented el 19 may. 2020 a las 20:45

2 respuestas 2

2

Al inicio eso también me confundía, puesto que no entendía qué eran los Observables en Angular, pero luego cuando los entendí, me di cuenta de que eran muy, muy útiles.

Resulta y pasa que un Observable es una clase que permite crear eventos personalizados, eventos que pueden venir de otros eventos y que quedan linqueados a otras funciones (hasta que nos desuscribamos de ellos).

Por ejemplo podemos usar:

Observable.from

Para crear eventos personalizados que provienen de otros de fábrica.
O eventos creados por nosotros:

messages = [];

constructor() {
   this.getMessages().subscribe(message => {
      this.messages.push(message);
   })
}

getMessages() {

   let observable = new Observable(observer => {
      this.socket.on("message", data => {
         observer.next(data);
      })
   });

   return observable;
}

Este código no es mio, fue tomado de:
Ionic Realtime Chat with Socket.io

Resulta y pasa, que como todo evento, cuando alguno de estos se dispara, automáticamente se ejecuta aquello que esta ligado al evento y por cada vez que se ejecuta se retorna un valor que puede ser o no diferente:

Observable.next()

Cuando nosotros nos subscribimos a los cambios:

Observable.subscribe()

Le estamos diciendo que cada vez que se ejecute Observable.next llame al cuerpo del evento con el último valor que nos devolvió Observable.next.

¿Pero qué pasa?, que aparentemente con cada iteración te estas subscribiendo a un nuevo Observable:

let results = [1, 2, 3, 4]
 randomArray.forEach( async (e, i) => {
     externalApi(e).subscribe(async ({data}) => {
        results.push(data);
        console.log("result", e);
     }, (error) => {
        console.log(error)
 });
});

Y aunque un observable no debería afectar al otro, puede ser que este observable se este ejecutando al crearse, por este motivo en cada iteración los resultados son tan diferentes, por que tus observables también están afectando a tu variable results.

Haciendo que ya no 1 si no 6 o 7 observables estén subscritos al mismo evento (o por lo menos al mismo cuerpo del evento), el evento el cual cambia la data de tu variable results.

Conclusión:

No son las promises ni el async, este resultado es culpa de los observables y el subscribe.

Lo cual es natural, puesto que normalmente no nos suscribimos varias veces a un mismo evento... lo ideal sería suscribirnos solo una vez ya que ya quedaría ligado a nuestro observable hasta que decidamos cancelarlo:

Observable.unsubscribe();
2
  • 1
    Te me has adelantado, @Riven. Efectivamente, el Observable es algo que confunde a veces a la gente que usa el módulo HttpClient de Angular, ya que los Observable de ese módulo "triggerean" una sola vez. Cuando se usa rxjs en otros contextos donde emiten varios valores, pasan este tipo de "inconsistencias".
    – VRoxa
    Commented el 19 may. 2020 a las 21:25
  • Agregaría a la respuesta que si sólo se espera un único valor de externalApi, en vez de suscribirse y desuscribirse, se puede convertir a Promise con el método toPromise para resolverla una única vez y obtener un único valor.
    – VRoxa
    Commented el 19 may. 2020 a las 21:27
1

Como ya respondió @Riven, se trata de observables y no promesas.
Si quieres iterar las respuesta del servicio de forma síncrona, puedes hacer lo siguiente:

let results = [1, 2, 3, 4];
randomArray.forEach( async (e, i) => {
    try {
        const data = await externalApi(e).toPromise();
        results.push(data);
        console.log("result", e);
    } catch(e) {
        console.error("result", e);
    }
});

El HttpClient de Angular y todos los observables incluyen un método que permite convertirlos en promesas.
Solo ten en cuenta que con esto solo obtendrás la primera respuesta del observable. Si se trata de un observable que responderá en multiples ocasiones, no te recomiendo hacer esto.

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.