在 Angular/RxJs 中，我如何捆绑 http 请求，以便一个捆绑包包含多个请求（http://test/1、http://test/2 等）答案

【问题标题】：In Angular/RxJs, how do I bundle http requests so that one bundle contains multiple requests (http://test/1, http://test/2, etc.)在 Angular/RxJs 中，我如何捆绑 http 请求，以便一个捆绑包包含多个请求（http://test/1、http://test/2 等）
【发布时间】：2018-08-08 23:28:38
【问题描述】：

我正在查看 bufferTime rxjs 运算符，并且本质上想使用它来捆绑 http 请求（this.http.get<string>('http://test/?id={num}'))。{num} 是 1 - 4。我想要的是每 2 秒捆绑一次这些请求。因此，如果在 2 秒内发出 2 个请求，它们看起来像：

this.http.get<string>('http://testUrl?id=1') 和 this.http.get<string>('http://testUrl?id=2')，它们将作为 1 个请求发送到服务器（我指的是捆绑）。服务器会收到'http://testUrl?id=1,2'

感谢您的阅读！

【问题讨论】：

能否请您提供一个代码 sn-p 您试图实现的地方？
@ramden 我刚刚从 CozyAzure 尝试了以下答案。您可以将此作为我想要实现的目标的参考。谢谢！

标签： angular rxjs

【解决方案1】：

forkJoin 允许您并行触发请求，从而“捆绑”您的请求。

首先用你的延迟创建 Observables 数组：

let obs = Array
    .from({length: 100}, (v, k) => k + 1)
    .map(x =>
        this.http.get<string>('http://test/{x}')
            .pipe(concatMap(item => of(item.pipe(delay(2000)))))
    );

然后只需使用forkJoin 解雇他们：

forkJoin(obs)
    .subscribe(x=>{
        console.log(x)//an array of response from HTTP
    })

以上代码只会在2*(100-1) = 198 秒内完成

【讨论】：

谢谢。我尝试了上述方法，但该页面仍然发出两个单独的 http 请求。要求是捆绑的请求只有一个，并且包含多个请求。
@KeyvanSadralodabai 它怎么会是一个请求，因为每个请求都是一个单独的、独立的 http 请求？如果您只想触发一个 http 请求，那么您需要确保您的 API 支持它。然后你的终点就不会是http://test/1/了。
我看到我的原始帖子不清楚，这当然是我的错。显然，要求是我聚合多个请求主体，而不是整个请求本身。我在上面提供了对我有用的东西。

【解决方案2】：

所以我稍微修改了代码。现在这两个请求主体合并为一个带有数组的主体。每 3 秒发送一组请求正文和 url：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Subject, Subscriber, Observable } from 'rxjs';
import { debounceTime } from 'rxjs/operators/debounceTime';
import { buffer } from 'rxjs/operators/buffer';

interface ReportRunStatus {
    status: any;
}

interface RequestWithObserver {
    request: number;
    observer: Subscriber<ReportRunStatus>;
}

const DEBOUNCE_TIME = 3000;

@Injectable()
export class WelcomeService {
    private requests = new Subject<RequestWithObserver>();
    private bufferTrigger = new Subject<null>();
    private requestBuffer = this.requests.pipe(buffer(this.bufferTrigger.pipe(debounceTime(DEBOUNCE_TIME))));

    constructor(
        private http: HttpClient
    ) {
        this.subscribeBufferRequests();
    }

    public getConfig(id: number) {
        return new Observable((observer) => {
            this.bufferTrigger.next(null);

            this.requests.next({
                request: id,
                observer
            });
        });
    }

    public subscribeBufferRequests() {
        this.requestBuffer.subscribe((requests) => {
            const requestsData = requests.map((r) => r.request);
            this.http.post('getMovie', requestsData).subscribe((response) => {
                requests.forEach((requestItem, i) => {
                    requestItem.observer.next(response[i]);
                });
            });
        });
    }
}

【讨论】：