rxjs use async/await in map Rx.Observable.range(1, 5).map

Question

I want get a list from rxjs using async/await. What should I do?

function getData(num){
    return new Promise((resolve, reject)=>{
        resolve(num + 1)
    })
}

async function create(){
    var list = await Rx.Observable.range(1, 5).map(async (num)=>{
        const data = await getData(num)
        return  data
    }).toArray().toPromise()

    return list
}


Rx.Observable.fromPromise(create()).subscribe(list=>{
    console.log(list)
}, err=>{
    console.log(err)
})

I get

[ Promise { 2 },
  Promise { 3 },
  Promise { 4 },
  Promise { 5 },
  Promise { 6 } ]

I want get data like this

[2,3,4,5,6]

Answer 1

It's a slightly old question. You might have got the answer already, but I thought it's a nice challenge, which turned out to be a surprisingly simple one too!

Just switch from map() to concatMap().

And you won't even need the async / await bit inside the mapping function. Although keeping or removing it doesn't seem to change anything for me.

So, the relevant bit can be simplified to:

async function create() {
  var list = await Rx.Observable.range(1, 5)
    .concatMap(num => getData(num))
    .toArray().toPromise();

  return list;
}

And again, you can keep it exactly as you had it in the question, and just change map to concatMap. I just wanted to see how far this can go

Here's a working example

Check the console at the bottom of the page for the results.