how to avoid nested asynchronous subscriptions in RxJS?

Question

I got this two subjects that both have a delay and I need the second one to be subscribed when the first one is completed, asynchronously. Both subjects only emit once (http requests) and I'm trying to avoid nested subscriptions but I can't figure out an optimal solution.

What I've got so far: Stackblitz

const order = of('2- created order').pipe(
  delay(100),
  tap(console.log)
);

const google = of('4- logged info to google').pipe(
  delay(500),
  tap(console.log)
);

console.log('1- started creating order');
order
  .pipe(tap(() => google.subscribe()))
  .subscribe(() => console.log("3- didn't wait for google"));

// 1- started creating order
// 2- created order
// 3- didn't wait for google
// 4- logged info to google

Answer 1

I think what you want to do is to have 2 subscriptions to your first http request, to achieve that just use a subject and subscribe to it. that way you can handle your second request with operators like switchMap ConcatMap etc, based on your needs. here is the sample based on stack blitz you posted. StackBlitz

Answer 2

const {Subject, of, concat} = rxjs;
const {tap, mergeMap, delay, ignoreElements} = rxjs.operators;

// Variant A: Dedicated stream for Google tasks
const order$ = new Subject();
const google$ = new Subject();

order$
  .pipe(
    tap(() => console.log('A: 1.')),
    mergeMap(orderData => of(orderData).pipe(
      delay(100),
      tap(() => console.log('A: 2.')),
      tap(order => google$.next(order)),
    )),
  )
  .subscribe(() => console.log('A: 3.'));
google$
  .pipe(delay(500))
  .subscribe(() => console.log('A: 4.'));
order$.next(3);


// Variant B: In place Google call
const orderB$ = new Subject();

orderB$
  .pipe(
    delay(2000),
    tap(() => console.log('B: 1.')),
    mergeMap(orderData => concat(
      of(orderData).pipe(
        delay(100),
        tap(() => console.log('B: 2.'))
      ),
      of(orderData).pipe(
        delay(500),
        tap(() => console.log('B: 4.')),
        ignoreElements()
      )
    )),
  )
  .subscribe(() => console.log('B: 3.'));
orderB$.next(3);

<script src="https://unpkg.com/rxjs@^7/dist/bundles/rxjs.umd.min.js"></script>