Currently, I am utilizing Angular's RxJs subscribe feature to initiate an HttpClient call and then proceed to make another call using the data retrieved from the initial request. Specifically, I first retrieve an address object and subsequently use that object to make a further API call. Here is a simplified example:
@Injectable()
export class AddressService {
constructor(private http: HttpClient) { }
getById(addressId: string, userId: string) {
return this.http.get(BACKEND_URL + 'getAddressById/' + [addressId, userId]);
}
}
export class AddressModalComponent implements OnInit {
constructor(private alertService: AlertService, private addressService: AddressService, @Inject(MAT_DIALOG_DATA) public data: any, private dropdownService: DropdownService)
ngOnInit() {
this.addressService.getById(this.data.id, this.data.userId)
.subscribe(
(address: Address) => {
this.dropdownService.getCidadesBrByEstado(address.name)
.subscribe((cities: BrCity[]) => {
this.cities = cities;
this.address = address;
},
error => console.log(error));
}, error => { this.alertService.error(error);
}
);
}
}
}I am striving to streamline my code by avoiding multiple subscribes, as there are numerous instances like this in my project. Ideally, I would prefer an Async/Await approach akin to Node.js promises while still leveraging Observables on the component level. My understanding of RxJs commands is not extensive... Could someone suggest a more optimized way to handle multiple API calls with just one subscribe and catch block?