使用RxJS和Angular2限制並發http請求

Question

我以前曾問過這個問題，但回答一直令我不滿意，因此我將盡力而為：

我正在使用https://www.npmjs.com/package/rxjs，並希望將許多http請求排隊，並且希望將其鏈接到其他操作中，如下所示：

urls$.flatMap(x => fetchUrls(x)).subscribe(x => console.log(x));

url $是一個Observable，而fetchUrls是一個返回新Observable的方法。 這將很好地工作，除了從urls $來的第一個流非常快並且fetchUrls方法很慢（執行http請求/響應）。 我最終一次運行了200多個http請求。

我認為在客戶端上留下200多個待處理的HTTP請求會帶來麻煩，因此我想以某種方式合並這些請求，並且我讀到可以在使用mergeMap / flatMap時設置最大並發請求，這確實很好。

我在這里為此創建了一個游樂場： http : //www.webpackbin.com/EkQXtBEwz我有一個名為fakeHttpLookup的方法，該方法將響應延遲一秒鍾，並提供200個URL列表-如果順序運行將花費200秒。 我想將maxConcurrent設置為5，最好的情況是它將在40秒內處理整個流。

問題是-我無法正常工作。 它確實需要前5個，但隨后停止。 它永遠不會完成整個流程。

我希望看到計數器每秒增加5，這說明一次同時存在5個並發的HTTP請求。

有人可以幫忙嗎？ 我只能一次運行一個請求-我一次可以緩沖5個請求，但是這里重要的是不要一次將所有200個請求排隊-或只處理前幾個請求。

TLDR：我希望能夠對HTTP請求進行排隊/合並，並且流必須能夠限制請求的數量，而不必猜測硬編碼的等待延遲。

Answer 1

.flatMap()或.mergeMap()具有可選參數'concurrency'

mergeMap（project：function（value：T，？index：number）：可觀察，resultSelector：function（outerValue：T，innerValue：I，externalIndex：number，innerIndex：number）：任意， 並發：number ）

因此，這僅僅是一個問題：

 function fetch(id) { return Rx.Observable.of(id) .do(i => console.log(`fetching request ${i}`)) .delay(2 * 1000); } Rx.Observable.range(1, 20) .flatMap(id => fetch(id), null, 5) .subscribe(console.log); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.0.3/Rx.js"></script> 

執行5個並發請求