如何使用 RxJs 处理/排队多个相同的 http 请求？答案

【问题标题】：How to handle/queue multiple same http requests with RxJs?如何使用 RxJs 处理/排队多个相同的 http 请求？
【发布时间】：2018-01-07 01:28:47
【问题描述】：

我正在制作一个 Angular 4 应用程序。组件正在订阅 Observable。有时 Observable 调用相同的 url。例如，在任何 http 请求之前需要“刷新访问令牌”。但如果我发出不同的 3 个 http 请求，它会“根据需要刷新”3 倍的刷新令牌。

那么如何让只有一个 http get 获得刷新的访问令牌，并让其他 observables '等待'第一个？（我知道“等待”对于 Observables 来说不是个好词）。

        public get(url: string, options?: RequestOptionsArgs): Observable<Response> {
            return this.getAccessToken().mergeMap(accessToken => {
              return this.http.get(url, options);
            });
          }

// 和

this.get('www.myapi.com/one').subscribe(data=>console.log('one',data))
this.get('www.myapi.com/two').subscribe(data=>console.log('two',data))
this.get('www.myapi.com/three').subscribe(data=>console.log('three,data))

【问题讨论】：

为什么不在第一个订阅中调用其他可观察对象
因为我不知道哪个会被调用。而且它不是很 rxjs-ly。

标签： angular http rxjs observable

【解决方案1】：

您似乎可以使用share() 运算符来确保源 Observable 始终只有一个订阅。

但是，这将需要您重新构建代码，因为所有观察者都需要使用相同的 share() 实例：

const sharedToken = this.getAccessToken().share();

public get(url: string, options?: RequestOptionsArgs): Observable<Response> {
  return sharedToken.mergeMap(accessToken => {
    return this.http.get(url, options);
  });
}

【讨论】：

【解决方案2】：

使用名为 forkJoin 的运算符。如果你熟悉 Promises，这与 Promise.all() 非常相似。 forkJoin() 运算符允许我们获取 Observable 列表并并行执行它们。一旦列表中的每个 Observable 发出一个值，forkJoin 就会发出一个 Observable 值，其中包含列表中 Observables 中所有已解析值的列表

请看下面的例子：

导入：

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/forkJoin';

假设你必须得到三页

var pages:number[] = [1, 2, 3];

或var pages:number[]=new Array(10).fill().map((v,i)=>i+1);

然后将它们映射到 observables 和 forkJoin 数组中

Observable.forkJoin(
   pages.map(
      i => this.http.get('www.myapi.com/' + i)
        .map(res => res.json())
   )
).subscribe(people => this.people = people);

请转至Stack 或forkJoin 了解更多信息。

【讨论】：