每个成功/错误调用上的RXJS回调

发布于 2025-02-12 09:52:21 字数 654 浏览 1 评论 0原文

我有这样的方案，

this.uiDataObservable.pipe(
    tap(() => this.showLoader.next(true)),
    map((uiData) => this.createHttpRequest(uiData),
    switchMap((httpRequest) => this.apiService.get(httpRequest),
    map((response) => this.createUISucessData(response),
    )
).subscribe(
    (success) => /* show data on UI */, 
    (error) => /* show error on UI */, 
    );

现在在此示例中，有什么正确的位置this.showloader.next（false）。

我不能使用最终确定，因为我的流永无止境。
我不能使用subscribe block的第三个回调完成，因为它从未得到错误的电话。

正确的RXJS处理这种情况的方法是什么？

原文

I have a scenario like this,

this.uiDataObservable.pipe(
    tap(() => this.showLoader.next(true)),
    map((uiData) => this.createHttpRequest(uiData),
    switchMap((httpRequest) => this.apiService.get(httpRequest),
    map((response) => this.createUISucessData(response),
    )
).subscribe(
    (success) => /* show data on UI */, 
    (error) => /* show error on UI */, 
    );

Now in this example what is the right place to call this.showLoader.next(false).

I cannot use finalize because my stream never ends.
I cannot use the third callback complete of subscribe block as it never
gets calls on error.

What is the correct rxjs way of handling this situation?

分享到QQ

分享到微博

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

发布评论

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

糖果控 2025-02-19 09:52:21

将其添加到成功和错误回调中，这不是我在这里寻找的东西。我期望有更多的RXJS方式。 - OP

我不确定为什么使用RXJS回调应该比其他任何内容都不应视为RXJ。无论如何，为了不重复this.showloader.next（false），您可以创建一个为您处理调用的自定义操作员。

可能如下：

function tapNxtErr<T>(fn: () => void): MonoTypeOperatorFunction<T> {
  return tap({
    next: _ => fn(),
    error: _ => fn()
  });
}

this.uiDataObservable.pipe(
  tap(() => this.showLoader.next(true)),
  map(uiData => this.createHttpRequest(uiData)),
  switchMap(httpRequest => this.apiService.get(httpRequest)),
  map(response => this.createUISucessData(response))
  tapNxtErr(() => this.showLoader.next(false))
).subscribe({
  next: success => /* show data on UI */, 
  error: error => /* show error on UI */
});

Adding it to success and error callback is something not I am looking for here. I am expecting something more rxjs way. - OP

I'm not sure why using RxJS callbacks should be considered less RxJS than anything else. Regardless, in an effort to not repeat this.showLoader.next(false), you could create a custom operator that handles the calls for you.

That might look as follows:

function tapNxtErr<T>(fn: () => void): MonoTypeOperatorFunction<T> {
  return tap({
    next: _ => fn(),
    error: _ => fn()
  });
}

this.uiDataObservable.pipe(
  tap(() => this.showLoader.next(true)),
  map(uiData => this.createHttpRequest(uiData)),
  switchMap(httpRequest => this.apiService.get(httpRequest)),
  map(response => this.createUISucessData(response))
  tapNxtErr(() => this.showLoader.next(false))
).subscribe({
  next: success => /* show data on UI */, 
  error: error => /* show error on UI */
});

回复收藏 0 原文

幼儿园老大 2025-02-19 09:52:21

找到更好的替代方案，代码是这样的：

this.uiDataObservable.pipe(
    tap(() => this.showLoader.next(true)),
    map((uiData) => this.createHttpRequest(uiData),
    switchMap((httpRequest) => {
        return this.apiService.get(httpRequest).pipe(
             catchError((error) => {
                 /* show error on UI */
                 return of({ /* return empty response or undefined */ })
             })
        )
    },
    map((response) => this.createUISucessData(response),
    )
).subscribe(
    (data) => { 
        this.showLoader.next(false);
        /* show data on UI */,
    });

Found better alternative, code goes like this:

this.uiDataObservable.pipe(
    tap(() => this.showLoader.next(true)),
    map((uiData) => this.createHttpRequest(uiData),
    switchMap((httpRequest) => {
        return this.apiService.get(httpRequest).pipe(
             catchError((error) => {
                 /* show error on UI */
                 return of({ /* return empty response or undefined */ })
             })
        )
    },
    map((response) => this.createUISucessData(response),
    )
).subscribe(
    (data) => { 
        this.showLoader.next(false);
        /* show data on UI */,
    });

回复收藏 0 原文

~没有更多了~