Question

我是rxjs的新手，这是我最近遇到的一个简单问题。我正在尝试使用Promise实用程序循环数组。我的期望是等待所有流结果和流结束，然后将其作为对象返回。但是，我不确定如何组合所有流并将它们作为单个对象返回。

我已经尝试过toArray()，我认为这是我想要的最接近的答案，但是我希望像toArray()这样的操作符与toObject()类似。我知道有一个叫forkJoin()的运算符，但不确定在我的情况下如何使用它。

这是我的代码

const textList = [
  {
    key: "text1key",
    label: "text1"
  },
  {
    key: "text2key",
    label: "text2"
  },
  {
    key: "text3key",
    label: "text3"
  }
];

const myPromise = (data) => new Promise((resolve, reject) => {
  resolve("translated" + data);
})

const source = from(textList).pipe(
  concatMap(textObj =>
    myPromise(textObj.label).then(result => ({ key: textObj.key, value: result }))),
  map(({ key, value }) => ({ [key]: value })),
  toArray(),  // expect to return a single object instead of array.
);

source.subscribe(finalResult => console.log("FINAL RESULT", finalResult));

期望在订阅期间获取对象而不是数组。

Answer 1

您需要使用reduce而不是map和toArray。因此，导入reduce运算符并将代码更改为以下内容：

const textList = [
  {
    key: "text1key",
    label: "text1"
  },
  {
    key: "text2key",
    label: "text2"
  },
  {
    key: "text3key",
    label: "text3"
  }
];

const myPromise = (data) => new Promise((resolve, reject) => {
  resolve("translated" + data);
})

const source = from(textList).pipe(
  concatMap(textObj =>
    myPromise(textObj.label).then(result => ({ key: textObj.key, value: result }))),
  reduce((acc, {key, value}) => {
    acc[key] = value; // add key and value into accum
    return acc;  // return accum for the next iteration
  }, {}) // set an initial value (accum) as empty object
);

source.subscribe(finalResult => console.log("FINAL RESULT", finalResult)); // { translatedtext1Key: text1, ... }

Reduce采用回调函数，其中累积值是第一个参数，而数组项是第二个。这与reduce与简单数组的工作方式非常相似。您可以详细了解here。

如何等待所有流结果并将最终结果作为对象返回？

1 个答案: