RxJS Async mapping

rx-asyncmap.js

const getTokens = (ids) => {
  return Rx.Observable.create((observer) => {
    ids.forEach((id) => {
      setTimeout(() => observer.next(`Token of id: ${id}`), 1000)
    })

    setTimeout(() => {
      console.log("Got tokens")
      observer.complete()
    }, 7000)
  })

}

const users = Rx.Observable.create((observer) => {
  observer.next({ name: 'user1', id: 1 })
  setTimeout(() => observer.next({ name: 'user2', id: 2 }), 1000)
  setTimeout(() => observer.next({ name: 'user3', id: 3 }), 2000)
  setTimeout(() => observer.complete(), 4000)
})

users
  .map((user) => {
    console.log('Got user: ' + JSON.stringify(user))
    return user.id
  })
  .toArray()
  .mergeMap(ids => getTokens(ids))
  .toArray()
  .subscribe(tokens => console.log('All tokens here: ' + JSON.stringify(tokens)))
  
// Expected output
// [ 'Token of id: 1', 'Token of id: 2', 'Token of id: 3' ]

Simulation:

1. Collect async users
2. Map all user ids
3. Collect async tokens by ids
4. Make a list of them
5. Print them out