Evitando doble subscribe

One of the main problems with observables is Callback Hell. Nesting N number of subscriptions, one inside the other, makes your code very difficult to maintain and read.

Solving Callback Problems

Using promises, you can solve this easily with async/await. But if we talk about observables, our best friend, the RxJS library, comes in to provide a solution.

A common example of this issue in Angular is like the following:

readAndUpdate(): void { // Example of callback hell this.apiService.getProduct(1) .subscribe(res => { this.apiService.updateProduct(1, { name: 'New product name' }) .subscribe(res2 => { // ...}); }); }); }

Where a request is being made for reading a product and immediately updating the product. Generating a subscribe within a subscribe.
Perhaps, up to two subscribes is acceptable, but it is not recommended to continue with that code structure and it is possible to solve it as follows.

import { switchMap } from 'rxjs/operators'; readAndUpdate(): void { // Solution callback hell this.apiService.getProduct(1) .pipe( switchMap(products => this.apiService.updateProduct(1, { name: 'New name' }) ) ) .subscribe(res => { // Updated product}); }

Importing switchMap from rxjs/operators, what this function does is to receive the data emitted by one observable, and immediately use it as input for the second one. This way, the code is cleaner and more professional.

---

Contributed by: Kevin Fiorentino.