使用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实现中)在其他语言).喜欢这个有用的网站