Rxjs common usage scenarios

[reboottime]

Overview

This article collections code snippets about some common usage scenarios in Rxjs. Bellow are the list

• HTTP dependencies

[reboottime]

HTTP Request Related

• Dependent Request: SwitchMap. In certain scenarios, subsequent HTTP requests depend on the data parameters obtained from previous requests. For example:

  • Obtain the current user's ID
  • Utilize the user ID to fetch the user's orders

• Remove UI Loading Effect after API request completion: finalize. For example

  • Before:

  fetchUserOrders(userId: User['id']) {
    this.orderService
      .getOrdersByUserId(userId)
      .subscribe({
        next: (data) => {
          this.isLoadingOrders = false; 
          this.orders = data;
       },
        error: () => {
         this.isLoadingOrders = false; 
          this.notificationService.showError('Failed to fetch orders');
        },
      });
  }
  

  • After

   fetchUserOrders(userId: User['id']) {
    this.orderService
      .getOrdersByUserId(userId)
      .pipe(finalize(() => this.isLoadingOrders = false))
      .subscribe({
        next: (data) => {
          this.orders = data;
       },
        error: () => {
          this.notificationService.showError('Failed to fetch orders');
        },
      });
  }