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');
         },
       });
   }