使用Rxjs的並發Ajax請求

Question

我目前正從承諾轉向觀察。 我正在使用Redux-Observable作為我的反應應用程序。 基本上，我正在尋找最好的運算符，它將啟用mutliple，並發ajax調用，並在所有observable已成功執行時返回響應。 這是我的應用程序的代碼片段。

let epicPostAd = (action$, store, {ajax}) =>
  action$.ofType(POST_AD)
   .debounceTime(1000)
   .mergeMap(({ payload }) =>
     ajax(generateAjaxRequestSetting(POSTS_URL, 'post', payload,CT_JSON))
      .map(response => postAdSuccessful(response))
      .catch(e => Observable.of(postAdUnsuccessful(e.xhr.response)))
      .takeUntil(action$.ofType(LOCATION_CHANGE))
    )

這是一個簡單的Ajax請求的帖子給定的廣告，並調度POST_AD_SUCCESSFUL時響應201其他分派POST_AD_UNSUCCESSFUL上的錯誤。 但問題是我想在有響應時制作后續的ajax可觀察流。 如

.map(response => /* start a stream of ajax observables then process the response */)

如果你向我展示實現這一目標的最佳方式，我將不勝感激。

Answer 1

聽起來你正在尋找forkJoin運算符 。

它將訂閱您傳遞給它的所有Observable，並且在它們全部完成后，它將從數組內的每個發出最后一個值。

在你的史詩中你想要做到這一點並不完全清楚，所以我只是做了一個通用的例子：

const somethingEpic = (action$, store, { ajax }) =>
  action$.ofType(SOMETHING)
    .mergeMap(() =>
      Observable.forkJoin(
        ajax('/first'),
        ajax('/second'),
        ajax('/third')
      )
      .do(results => {
        // the results is an array, containing each
        const [first, second, third] = results;
        console.log(first, second, third);
      })
      .map(results => ({
        type: 'SOME_RESULTS',
        results
      }))
    );

從技術上講，它支持你可以使用的最終resultSelector參數，而不是在它之后使用map運算符，但我傾向於不使用它，因為我發現它不太清楚，在常見的redux-observable樣式情況下只有微不足道的性能優勢。 但它仍然很好知道。 可以方便更多的“數據規范化”的東西，而不是“將其轉化為動作”的東西。

const somethingEpic = (action$, store, { ajax }) =>
  action$.ofType(SOMETHING)
    .mergeMap(() =>
      Observable.forkJoin(
        ajax('/first'),
        ajax('/second'),
        ajax('/third'),
        results => ({
          type: 'SOME_RESULTS',
          results
        })
      )
    );

---

另外，如果你問自己“我使用什么操作員？” 您應該嘗試文檔中的操作員向導： http ： //reactivex.io/rxjs/

向下滾動到說：

您是否需要為您的問題找到操作員？ 首先從下面的列表中選擇一個選項：

• 我有一個現有的Observable，並且......
• 我有一些Observables作為一個Observable組合在一起，並且......
• 我還沒有Observables，而且......

提示：打開你的DevTools來試驗RxJS。

雖然在這種情況下， forkJoin是正確建議的，但是當你點擊它時，它還沒有記錄：sadface：但谷歌搜索會提供許多不同的網站，解釋它的作用以及如何使用它（在RxJS和其他Rx中）其他語言的實現）。 喜歡這個有用的網站

Answer 2

這是我自己的問題的答案。 盡管JayPhelps回答，但我意識到我的問題並不那么明確。 使用Jay的推薦。 我想出了以下內容：

let epicPostAd = (action$, store, {ajax, observable}) =>
  action$.ofType(POST_AD)
   .debounceTime(1000)
   .mergeMap(({ payload }) =>
     ajax(generateAjaxRequestSetting(POSTS_URL, 'post', payload, CT_JSON))
      .mergeMap(response =>
        observable.forkJoin(
          ajax(''),
          ajax('')
        )
      .do(res => {
        const [first, second, third] = results;
        console.log(first, second, third);
      })
      .map(res => postAdSuccessful(res))
    )
    .catch(e => observable.of(postAdUnsuccessful(e.xhr.response)))
    .takeUntil(action$.ofType(LOCATION_CHANGE))

）

所以這里是如何工作的。 我使POST請求和之后立即Ajax請求完成執行我.mergeMap到AJAX ovservables的使用流響應.forkJoin() 然后處理結果