1
\$\begingroup\$

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
\$\endgroup\$
3
  • \$\begingroup\$ This question does not seem to match what this site is about. Code Review is about improving existing, working code. Code Review is not the site to ask for help in fixing or changing what your code does. Once the code does what you want, we would love to help you do the same thing in a cleaner way! Please see our help center for more information. If you happen to fix the code, please provide enough context with it. We can't handle stubs and snippets so well. \$\endgroup\$
    – Mast
    Jun 12, 2021 at 20:04
  • \$\begingroup\$ @Mast The code is working fine and the output is just what I intended. I'm just looking for a more slick and RxJS way or some tips on how to improve this. Maybe this was more suited for Stackoverflow, should we migrate it? \$\endgroup\$
    – azerafati
    Jun 13, 2021 at 5:08
  • \$\begingroup\$ The current question title, which states your concerns about the code, is too general to be useful here. Please edit to the site standard, which is for the title to simply state the task accomplished by the code. Please see How to get the best value out of Code Review: Asking Questions for guidance on writing good question titles. \$\endgroup\$ Nov 4, 2021 at 13:57

2 Answers 2

1
\$\begingroup\$

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

\$\endgroup\$
0
-1
\$\begingroup\$

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>

\$\endgroup\$
3
  • \$\begingroup\$ Welcome to Code Review! You have presented an alternative solution, but haven't reviewed the code. Please edit to show what aspects of the question code prompted you to write this version, and in what ways it's an improvement over the original. It may be worth (re-)reading How to Answer. \$\endgroup\$ Nov 4, 2021 at 10:50
  • \$\begingroup\$ If you have a new question, please ask it by clicking the Ask Question button. Include a link to this question if it helps provide context. - From Review \$\endgroup\$ Nov 4, 2021 at 10:50
  • \$\begingroup\$ Thanks for the links. Interesting reading. Please remove my answer. Thanks. \$\endgroup\$ Nov 4, 2021 at 11:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.