Angular RXJ在第一次请求完成后进行多个HTTP并行呼叫

发布于 2025-01-28 10:07:28 字数 1702 浏览 6 评论 0 原文

收到初始请求响应后，我需要在我的NGRX效果中执行三个并行请求。我实现了以下内容，但是当我使用“网络”选项卡进行检查时，所有三个请求均已排队。并且所有查询均顺序执行。

我想提出三个并行请求。

如何验证叉子联接结果是否不确定。

  fetchDatotallyWhenuserLogin $ = createeefect（（）=＆gt; {
    返回this.actions $ .pipe（
      type（fetchdefaultsiteperuser），
      switchmap（（）=＆gt; {
        返回第一个请求（参数）
          。管道（
            this.startwithtap（（（）=＆gt; this.store.dispatch（setloadingspinner（{showloading：true}））），），
            过滤器（firstreqresponse =＆gt; firstreqresponse！== undefined），
            点击（firstreqresponse =＆gt; {
              if（firstreqresponse === null）{
                投掷“尚未分配用户的默认网站”。
              } 别的 {
                sessionstorage.setItem（foo，json.stringify（firstreqresponse））;
              }
            }），
            地图（firstreqresponse =＆gt; firstreqresponse），
        ConcatMap（firstreqresponse =＆gt;
         //我需要并行提出以下请求
          forkjoin（[
            parallel_request_01（firstreqresponse），
            parallel_request_02（firstreqresponse），
            Parallel_Request_03（firstreqresponse）
          ]）。管道（
            过滤器（响应=＆gt;响应！==未定义），
            映射（（[[Parallel_request_01_Resp，parallel_request_02_resp，parallel_request_03_resp]）=＆gt; {
              返回最后一个（
                {
                  答：parallel_request_01_resp，
                  B：parallel_request_02_resp，
                  C：parallel_request_03_resp，
                  D：firstreqresponse 
                }））
            }））
          ）
        ），
        //捕获错误
        catcherror（this.exceptionrxjs.handlerxjserror），
        最终确定（（）=＆gt; this.store.dispatch（setloadingspinner（{showloading：false}））））））
      ）
  }））
）

}）

原文

After receiving the initial request response, I need to perform three parallel requests in my ngrx Effect.
I implemented the following, however when I inspect it using the network tab, all three requests are queued. and all queries are executed sequentially.

I WANT TO MAKE THREE PARALLEL REQUESTS.

HOW TO VERIFY WHETHER A FORK JOIN RESULT IS UNDEFINED OR NOT.

fetchDataTotallyWhenUserLogIn$ = createEffect(() => {
    return this.actions$.pipe(
      ofType(fetchDefaultSitePerUser),
      switchMap(() => {
        return FIRST REQUEST (params)
          .pipe(
            this.startWithTap(() => this.store.dispatch(setLoadingSpinner({showLoading: true}))),
            filter(firstReqResponse=> firstReqResponse!== undefined),
            tap(firstReqResponse => {
              if (firstReqResponse === null) {
                throw "The user's default site has not been assigned."
              } else {
                sessionStorage.setItem(Foo, JSON.stringify(firstReqResponse));
              }
            }),
            map(firstReqResponse => firstReqResponse),
        concatMap(firstReqResponse =>
         //I NEED MAKE FOLLOWING REQUESTS AS PARALLEL
          forkJoin([
            PARALLEL_REQUEST_01(firstReqResponse ),
            PARALLEL_REQUEST_02(firstReqResponse ),
            PARALLEL_REQUEST_03(firstReqResponse )
          ]).pipe(
            filter(response => response !== undefined),
            map(([PARALLEL_REQUEST_01_RESP, PARALLEL_REQUEST_02_RESP, PARALLEL_REQUEST_03_RESP]) => {
              return LastAction(
                {
                  a: PARALLEL_REQUEST_01_RESP,
                  b: PARALLEL_REQUEST_02_RESP,
                  c: PARALLEL_REQUEST_03_RESP,
                  d: firstReqResponse 
                })
            })
          )
        ),
        // Catch errors thrown above
        catchError(this.exceptionRxjs.handleRxJsError),
        finalize(() => this.store.dispatch(setLoadingSpinner({showLoading: false})))
      )
  })
)

})

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

亚希 2025-02-04 10:07:28

使用 MERGE 运算符：

refresh$ = createEffect(() =>
  this.actions$.pipe(
    ofType(CustomerActions.refresh),
    exhaustMap(({ customerIds }) =>
      merge(
        ...ids.map((id) =>
          this.customersService.getCustomer(id).pipe(
            map(CustomerActions.getCustomerSuccess),
            catchError((err) =>
              of(CustomerActions.getCustomerFailed(id, err.message)),
            ),
          ),
        ),
      ),
    ),
  ),
)

Use the merge operator:

https://timdeschryver.dev/snippets#multiple-service-calls-from-an-effect

refresh$ = createEffect(() =>
  this.actions$.pipe(
    ofType(CustomerActions.refresh),
    exhaustMap(({ customerIds }) =>
      merge(
        ...ids.map((id) =>
          this.customersService.getCustomer(id).pipe(
            map(CustomerActions.getCustomerSuccess),
            catchError((err) =>
              of(CustomerActions.getCustomerFailed(id, err.message)),
            ),
          ),
        ),
      ),
    ),
  ),
)

回复收藏 0 原文

~没有更多了~