javascript - 如何使用 RxJS 发出多个 HTTP 请求并将响应合并到一个有效负载中并将其映射到另一个操作？

Question

根据标题，我一直在尝试找出一种方法，从一个操作有效负载进行多个 HTTP 调用，并将所有结果基本上合并到一个数组中，然后将结果映射到另一个操作作为有效负载。

这是我现有的代码，它可以工作，但似乎没有合并两个响应，只关心请求响应的最后一个响应，也许我使用了错误的运算符，我只是选择 RxJS 并尝试不同的方法需要学习的东西，希望有人能够解释我哪里出错了。

非常感谢任何帮助或指导。

{
    type: 'FETCH_DATA',
    payload: {
        key: 'standings',
        value: [
                'http://url-1',
                'http://url-2'
        ],
    })
}


// The epic is listening to the above action

const fetchDataEpic = action$ => action$.pipe(
    ofType('FETCH_DATA'),
    mergeMap(action => {
        const { key, value } = action.payload;
        if (Array.isArray(value) && value.length) {
            const makeRequest = value.map((x, i) => ajax.getJSON(value[i]))

            return (
                forkJoin(
                    makeRequest,
                    response => {
                        return ({
                            type: 'FETCH_DATA_SUCCEEDED',
                            payload: {
                                key,
                                value: response,
                            },
                        })
                    }
                )
            )
        }
    })
);

注意:两个请求的响应均采用相同的 JSON 格式，具有相同的属性，但数据不同。

提前致谢

Answer 1

看起来您正在使用 rxjs 的 ajax 函数，它应该已经为您提供了可观察值。在这种情况下，一旦所有可观察的值都发出了值，forkJoin 应该以数组的形式为您提供两个值。然后您可以使用 map 函数添加到您的操作负载中。

const requestArrays = [1, 2].map(i => {
  return rxjs.ajax.ajax.getJSON(`https://jsonplaceholder.typicode.com/posts/${i}`);
});

rxjs.forkJoin(requestArrays)
  .pipe(
    rxjs.operators.tap(resp => {
      console.log('Part 1: Response so far: ');
      console.log(resp);
    }),
    rxjs.operators.map(value => {
      return {
        type: 'FETCH_DATA_SUCCEEDED',
        payload: {
          value
        }
      };
    }),
    rxjs.operators.tap(resp => {
      console.log('Part 2: Result as a action payload: ');
      console.log(resp);
    }),
  )
  .subscribe();

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.3/rxjs.umd.min.js"></script>

---

编辑: 以下是您实现它的大致方法。

const action = {
  type: 'FETCH_DATA',
  payload: {
    value: [
      '1',
      '2'
    ],
  }
};

rxjs.of(action)
.pipe(
    rxjs.operators.mergeMap(action => {
      const requestArrays = action.payload.value.map(i => {
        return rxjs.ajax.ajax.getJSON(`https://jsonplaceholder.typicode.com/posts/${i}`);
      });
      return rxjs.forkJoin(requestArrays)
      .pipe(
          rxjs.operators.map(value => {
            return {type: 'FETCH_DATA_SUCCEEDED', payload: {value}};
          })
      )
    })
)
.subscribe(console.log);

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.3/rxjs.umd.min.js"></script>