如何处理订阅回调中的逻辑？

发布于 2025-02-13 00:17:21 字数 1038 浏览 1 评论 0原文

我正在研究一个应用程序，该应用程序通过HTTP调用显示表数据获取。我遇到的问题是我的订阅回调中有很多逻辑。如何更好地处理它？

下面的代码来自一个带有过滤器的表的组件，该组件还运行了5秒的轮询（由this.pollinghandler（）启动）。

有关下面代码的一些信息：

Carid最初是从此路径变量中获取的
。加载用于显示加载消息
this.Rows =表中显示的
calling pollinghandler（）开始对
This.ResetFilterForm（）重置所有过滤器，将所有过滤器重置在形式

fetchTableData(carId:string): void {
    this.resetFilterForm();
    this.carService.getcar(carId)
        .pipe(takeUntil(this.destroy$))
        .subscribe({
            next: (response: Car) => {
                this.car = response;
                this.carId = response.carId;
                this.rows = response.carData;
                this.pollingHandler();
                this.loading = false;
            },
            error: (response) => {
                this.rows = [];
                this.loading = false;
                this.notificationUtilService.addErrorToastNotification(response?.error?.message ?? "Error getting car data")
            }
        })
}

原文

I'm working on an application which displays table data fetched thru a http call. The problem I'm running into is that there's a lot of logic in my subscribe callbacks. How can I handle this in a better way?

The code below is from a component which displays a table with filters, which also has a 5 second polling running (started by this.pollingHandler()).

some info about the code below:

carId is initially fetched from a path variable
this.loading is used to display a loading message
this.rows = data shown in the table
calling pollingHandler() starts polling
this.resetFilterForm() resets all the filters in the form

fetchTableData(carId:string): void {
    this.resetFilterForm();
    this.carService.getcar(carId)
        .pipe(takeUntil(this.destroy$))
        .subscribe({
            next: (response: Car) => {
                this.car = response;
                this.carId = response.carId;
                this.rows = response.carData;
                this.pollingHandler();
                this.loading = false;
            },
            error: (response) => {
                this.rows = [];
                this.loading = false;
                this.notificationUtilService.addErrorToastNotification(response?.error?.message ?? "Error getting car data")
            }
        })
}

分享到QQ

分享到微博

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

发布评论

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

甚是思念 2025-02-20 00:17:23

为了避免回调地狱，您可以在订阅呼叫之外定义回调功能。

  setData = (response: Car) => {
    this.car = response;
    this.carId = response.carId;
    this.rows = response.carData;
    this.pollingHandler();
    this.loading = false;
  };

  handleError = (response: any) => {
    this.rows = [];
    this.loading = false;
    this.notificationUtilService.addErrorToastNotification(
      response?.error?.message ?? 'Error getting car data'
    );
  };

  fetchTableData(carId: string): void {
    this.resetFilterForm();
    this.carService.getcar(carId).pipe(takeUntil(this.destroy$)).subscribe({
      next: this.setData,
      error: this.handleError,
    });
  }

To avoid callback hell, you can define your callback functions outside of the subscribe call.

  setData = (response: Car) => {
    this.car = response;
    this.carId = response.carId;
    this.rows = response.carData;
    this.pollingHandler();
    this.loading = false;
  };

  handleError = (response: any) => {
    this.rows = [];
    this.loading = false;
    this.notificationUtilService.addErrorToastNotification(
      response?.error?.message ?? 'Error getting car data'
    );
  };

  fetchTableData(carId: string): void {
    this.resetFilterForm();
    this.carService.getcar(carId).pipe(takeUntil(this.destroy$)).subscribe({
      next: this.setData,
      error: this.handleError,
    });
  }

回复收藏 0 原文

~没有更多了~