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

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。