Navigating transactional API calls in Angular 4 while handling state management

Question

Navigating transactional API calls in Angular 4 while handling state management

I am seeking guidance on how to efficiently execute the following task:

To add a user to our system through a form, I need to make 3 or 4 separate API calls/endpoints.

The first call will create a user account and return an ID.
The second call will generate a contact record using the previous ID from a different endpoint.
Subsequent calls may be needed to create additional business domain records based on the previous steps.

I have reviewed some discussions on executing multiple sequential requests: Multiple Sequential API calls in Angular 4

However, I am unsure of how to ensure that all the calls function as a single transaction. In case any step fails (such as invalid email regex in step 2), I want to handle the error and resume from where it stopped rather than restarting the entire process.

One idea I had was combining the solution provided in the reference with localStorage - but is there a more effective approach?

Thank you

javascript angular typescript rxjs angular2-forms

Answer 1

Answer №1

To accomplish this task, one can utilize the concatMap, do, and merge operators in combination:

this.formSubmit$
  .concatMap(formData => this.http.post(...).map(user => user.id))
  .do(id => /* handle id processing here */)
  .merge(this.recoverWithId$) // continue from saved id point onwards

  .concatMap(id => this.http.post(...))
  .do(id => /* save necessary data here */)
  .merge(this.recoverWithWhatever$) // proceed from existing data onward

  ...
  .retry()
  .subscribe()

If any errors occur during the execution of this.http.post, they will be passed along and subsequent steps will be skipped. To prevent premature disposal, retry() is used before subscribe().

The use of the catch operator may also be considered depending on the desired behavior.

Answer 2

To accomplish this task, one can utilize the concatMap, do, and merge operators in combination:

this.formSubmit$
  .concatMap(formData => this.http.post(...).map(user => user.id))
  .do(id => /* handle id processing here */)
  .merge(this.recoverWithId$) // continue from saved id point onwards

  .concatMap(id => this.http.post(...))
  .do(id => /* save necessary data here */)
  .merge(this.recoverWithWhatever$) // proceed from existing data onward

  ...
  .retry()
  .subscribe()

If any errors occur during the execution of this.http.post, they will be passed along and subsequent steps will be skipped. To prevent premature disposal, retry() is used before subscribe().

The use of the catch operator may also be considered depending on the desired behavior.

Navigating transactional API calls in Angular 4 while handling state management

Answer №1

Similar questions

The module '...' is encountering an error with the imported value '...'. To resolve this issue, please include a @NgModule annotation

Can you explain how to compare a value with a set of enum values?

Issue with URL redirection and reloading in Safari and IE browsers

tips for working with vueJs and properties file

When transferring data from Django rest framework to a JavaScript array, there may be issues with missing

Refreshing a page in Angular 4/5 using TypeScript

Issues with establishing connection to the database and handling input in Ionic are causing difficulties

PHP displays the array returned by Ajax as "[object Object],[object Object]"

Unwanted transparency issue in MaterialUI (MUI) BottomNavigation

$cookie retrieves information in the form of a string rather than a Map

Transmitting multiple file attachments to a PHP file through AJAX

Looking for assistance with retrieving all files from a directory based on their file extensions in JavaScript

Create functionality for editing and reviewing content within an HTML webpage

Flexbox is not properly repeating elements horizontally

Step by step guide on uploading files using Vue.js and Express.js

Connecting ASP.NET Core null values with Angular2 null: A Step-by-Step Guide

Retrieve information from the API following a change in language with Ngx-Translate

Access a specific array containing a value within its name

Testing a component that is utilizing data from an Angular ReplaySubject

Steps for transforming a numerical value into an array with individual elements, such that the maximum value in the array will be 1