rxjs 在地圖 Rx.Observable.range(1, 5).map 中使用 async/await

Question

我想使用 async/await 從 rxjs 獲取列表。 我該怎么辦？

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)
})

我得到

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

我想得到這樣的數據

[2,3,4,5,6]

Answer 1

這是一個有點老的問題。 你可能已經得到了答案，但我認為這是一個很好的挑戰，結果也是一個非常簡單的挑戰！

只需從map()切換到concatMap() 。

而且您甚至不需要映射函數中的async / await位。 盡管保留或刪除它對我來說似乎沒有任何改變。

因此，相關位可以簡化為：

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

  return list;
}

同樣，您可以完全按照問題中的要求保留它，只需將map更改為concatMap 。 我只是想看看這能走多遠

這是一個工作示例

檢查頁面底部的控制台以獲取結果。