• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

122
Vistas
Waiting for an async call to finish before passing to a new a new observable

I have some difficulties with some rxjs calls and I could use some help. My problems is to parcours a list of ids, make an async call for each id and then pass on the next id once this async call is finish. Unfortunaly I did not manage to find a proper solution yet.

Here my code so far:

import { from, interval, of, Subject, timer } from 'rxjs';
import { concatMap, filter, flatMap, map, take } from 'rxjs/operators';

const callFinised$ = new Subject();

const makeAsyncCall = val => {
  console.log('start call for ', val);
  interval(1000)
    .pipe(take(1))
    .subscribe(() => {
      callFinised$.next(true);
      console.log('call finished for ', val);
    });
};

from(['id1', 'id2'])
  .pipe(
    concatMap(val => {
      return of(val).pipe(
        flatMap(() => {
          makeAsyncCall(val);
          return callFinised$;
        }),
        filter(callFinised => callFinised === true),
        take(1),
        map(() => {
          return val + '_updated';
        })
      );
    })
  )
  .subscribe(finalVal => console.log('finalVal', finalVal));

Here the stackblitz associated: stackblitz

The second id is emited before the first async is finished, so I'm a bit lost.

Best regards

almost 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Here's a version of your code that (I think) does what you're after.

const makeAsyncCall = val => defer(() => {
  console.log('start call for ', val);
  return timer(1000).pipe(
    map(_ => true),
    tap(_ => console.log('call finished for ', val))
  );
});

from(['id1', 'id2']).pipe(
  concatMap(id => makeAsyncCall(id).pipe(
    filter(callFinished => callFinished === true),
    map(_ => id + '_updated')
  ))
).subscribe(finalVal => console.log('finalVal', finalVal));

Update:

Defer doesn't accomplish anything for you in the code above since you call makeAsyncCall at basically the same time you subscribe to the returned observable.

However, creation and subscription to Observables are different things.

In the following code, I create all the Observables first and then afterward I concatenate them and call them one after another. Without defer, this code wouldn't output what you're expecting.

const idCalls = ["id1", "id2"].map(id => 
  makeAsyncCall(id).pipe(
    filter(callFinished => callFinished === true),
    map(_ => id + '_updated')
  )
);

concat(...idCalls).subscribe(
  finalVal => console.log('finalVal', finalVal)
);
almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda