通过 forkJoin 和响应识别的并行 http 请求答案

【问题标题】：Parallel http requests via forkJoin and response identification通过 forkJoin 和响应识别的并行 http 请求
【发布时间】：2020-01-15 10:41:31
【问题描述】：

我想对端点进行并行独立调用。

首先我构造我的调用然后我调用forkJoin。

getAllDirections(data: Object, date: string) {
  let urls = [];
  for (let elm in data) {
    let url = `http:XXXXX?date=${date}&directions=${data[elm].All.join()}`;
    urls.push(this.http.get<ISchedules>(url));
  }
  return forkJoin(urls).pipe(
    map(dirData => {
      let dataSorted = dirData.map(elm => _.groupBy(elm.data, 'direction'));
      return dataSorted;
    })
  );
}

数据参数是我传递给 URl 的参数对象

data = {
    b1: [params1],
    b2: [params2],
    b3: [params3]
}

我希望能够构造这个对象

dataRes = {
    b1: [resDataofParams1],
    b2: [resDataofParams2],
    b3: [resDataofParams3]
}

当我得到数组响应时，我应该将每个数组项影响到它对应的b{n}，我怎样才能以我在forkJoin 中传递的相同顺序获取响应？或者有没有办法在this.http.get<ISchedules>(url) 中传递一个参数并在我得到数据响应时获取它？

【问题讨论】：

标签： javascript angular rxjs reactive-programming

【解决方案1】：

在我看来，最好使用库RXJS 中已经创建的方法forkJoin()。 In RXJS 6.5 you need to pass an array of observables:

const combined = Observable.forkJoin(
  [(this.http.get('https://foourl1').map((res: Response) => res.json()),
  of(this.http.get('https://foourl1').map((res: Response) => res.json())]
)

combined.subscribe(latestValues => {
    const [ data_changes , data_all ] = latestValues;
    console.log( "data_changes" , data_changes);
    console.log( "data_all" , data_all);
});

forkJoin会在所有调用结束后返回数据并返回结果。

另一个例子：

const request1 = this.http.get('https://restcountries.eu/rest/v1/name/india');
const request2 = this.http.get('https://restcountries.eu/rest/v1/name/us');
const request3 = this.http.get('https://restcountries.eu/rest/v1/name/ame');
const request4 = this.http.get('https://restcountries.eu/rest/v1/name/ja');

const requestArray = [];
requestArray.push(request1);
requestArray.push(request2);
requestArray.push(request3);
requestArray.push(request4);

forkJoin(requestArray).subscribe(results => {
  console.log(results);
  this.response = results;
});

所有结果都按顺序推送到requestArray.，可以在a stackblitz example看到。

【讨论】：

我正在使用 rxjs 6 库的 forkjoin，从 v5 开始不推荐使用 Observable.forkJoin
我的问题是识别结果对应于哪个调用

【解决方案2】：

从 RxJS 6.5 开始，您可以将 Observables 的字典传递给 forkJoin 以获取包含每个 Observable 的最后响应的 Object。

const http = (url: string) => of("response for " + url);
const data = {
  b1: ["b1-1", "b1-2"],
  b2: ["b2-1", "b2-2"],
  b3: ["b3-1", "b3-2"]
};
const date = '15.01.2020';

// map data to dictionary of http requests
const httpRequests = Object.keys(data).reduce((p, c) => {
  const url = `http:XXXXX?date=${date}&directions=${data[c].join(',')}`;
  return { ...p, [c]: http(url) };
}, {});

forkJoin(httpRequests).subscribe(console.log);

// output
{ 
  b1: "response for http:XXXXX?date=15.01.2020&directions=b1-1,b1-2", 
  b2: "response for http:XXXXX?date=15.01.2020&directions=b2-1,b2-2", 
  b3: "response for http:XXXXX?date=15.01.2020&directions=b3-1,b3-2"
}

https://stackblitz.com/edit/rxjs-qecpud

【讨论】：