Enforce order on async operations

Peng Xiao — Sat, 16 May 2020 01:19:37 +0000

Say we have two methods: foo and bar

const foo = function() {
  setTimeout(() => {
    console.log('foo')
  }, 100)
}

const bar = function() {
  setTimeout(() => {
    console.log('bar')
  }, 50)
}

We want to make sure that 'foo' is printed before 'bar'.

Here is how you can do it with rxjs (6.5).

import {of, defer, Subject} from 'rxjs'
import {concatAll} from 'rxjs/operators'
const foo = function() {
  const subjectFoo = new Subject()
  setTimeout(() => {
    subjectFoo.next('foo')
    subjectFoo.complete()
  }, 100)
  return subjectFoo
}

const bar = function() {
  const subjectBar = new Subject()
  setTimeout(() => {
    subjectBar.next('bar')
    subjectBar.complete()
  }, 100)
  return subjectBar
}

const source = of(defer(foo), defer(bar))
source.pipe(concatAll()).subscribe(console.log)

I know I am changing the signature of foo and bar. This might not be possible in some cases.

A few things to note:

Let your function return a Subject;
Complete the Subject in the callback of the async operation;
defer the functions and build a observable; make sure you put them in the right order
Concat all of them with pipe(concatAll()
Subscribe to the final observable.

DEV Community: Peng Xiao

Enforce order on async operations