如何将observable转为数组或改造函数使其适配observable计算实验平均尝试次数

核心说明 #

Observable为异步数据流，无法直接同步转换为数组使用。最小改动方案为将原有计算逻辑封装为独立函数，在Observable的订阅回调中传入接口返回的结果集执行即可，原有计算逻辑几乎无需修改。

具体实现 #

步骤1：封装原有计算逻辑 #

将现有计算代码封装为可复用函数，内部逻辑无需调整：

function calcExperimentAvg(cResult) {
  const resultsObj = cResult.reduce((acc, cResults) => {
    cResults.results.forEach(t => {
      if (t.successful) {
        if (acc[t.experiment] == null) acc[t.experiment] = []
        acc[t.experiment].push(t.attempts)
      }
    })
    return acc;
  }, {});
  return Object.keys(resultsObj).map(key => {
    const count = resultsObj[key].length
    const sum = resultsObj[key].reduce((a, b) => a + b, 0)
    return {
      experiment: key,
      avgAttempts: sum / count
    }
  });
}

步骤2：订阅Observable执行计算 #

假设接口返回的Observable命名为resultSet$，其发射的数据和原有cResult数组结构完全一致，直接订阅即可：

resultSet$.subscribe(cResult => {
  const avgResult = calcExperimentAvg(cResult);
  // 后续处理逻辑写在此处，例如打印结果、赋值给视图变量
  avgResult.forEach(item => console.log(item.avgAttempts))
})

如果当前使用的是AngularJS 1.x版本，订阅回调中更新视图变量时需包裹$scope.$apply()触发视图更新。

可选响应式处理方案 #

如果需要和其他异步流逻辑组合，可直接使用RxJS的map操作符在流内完成计算：

import { map } from 'rxjs/operators';

resultSet$.pipe(
  map(cResult => calcExperimentAvg(cResult))
).subscribe(avgResult => {
  // 直接获取计算完成的结果
  console.log(avgResult)
})

注意事项 #

• 所有依赖平均次数计算结果的逻辑都必须放在订阅回调内部执行，无法在订阅外同步获取结果。
• 注意校验返回结果的字段名，现有示例代码中存在rxperiment的笔误，实际使用时需和接口返回字段对齐，避免统计错误。

内容的提问来源于stack exchange，提问作者user16853055