Angular does not wait for the backend service call response in tap

Question

Angular does not wait for the backend service call response in tap

Does anyone have a solution for subscribing to responses when the tap operator is used in a service?

edit(status) {
    dataObj.val = status;
    // call post service with status..
    this.service
        .update(dataObj)
        .pipe(takeUntil(this._ngUnsubscribe$))
        .subscribe(() => {
            //i would like to wait until response come from backend and then navigate to the page so i                get data over there.
            if (res.status === 'Success') {
                this.router
                    .navigate(['../../success'], {
                        relativeTo: this.route,
                    })
                    .then(() => {});
            } else {
                this.location.back();
            }
        });
}

//akita store service

update(
    obj: any,
): Observable < any > {
    return this.service.update(obj).pipe(
        delay(800),
        map((data: RestfulResponse < any > ) => data.data),
        tap((data: anny) => {
            this.store.update((state) => {
                state.updateValue = data; // value is not updating and it is navigating to route
            });
        }),
    );
}

//post service

update(obj){
//post call
}

Any suggestions on utilizing tap in the service side and subscribing on the component side?

I'm aware of using finalize but it doesn't seem to be helpful for adding conditions inside.

javascript angular typescript rxjs

Answer 1

Answer №1

Utilizing the tap operator is intended for managing side effects that occur outside of your observable pipeline's scope. This implies that your pipeline will not wait for outcomes from the tap operation itself. It is advisable to reserve its usage primarily for debugging purposes.

If awaiting a specific state change, it is recommended to set up a distinct observable that monitors and selects the desired state alteration within your store.

For triggering supplementary actions in response to certain events, employing ngrx Effects is advised.

To delve deeper into this topic, refer to my post where I elaborate on implementing a similar scenario:

In lieu of directly updating the store, focus on establishing reducers responsible for applying state modifications.

View each of the following tasks as discrete entities that can be implemented autonomously:

Upon user editing, initiate an edit action.
The reducer should update the state consequent to the edit action (e.g., indicating an ongoing save).
Following the edit action trigger, prompt an effect to conduct an HTTP request for saving changes and subsequently signaling a completion action.
Upon completion of the save process, instigate router navigation.

This modular approach enables you to test and validate individual components with ease.

If #1 triggers an action consumed by your reducer (#2), consider setting up an ngrx Effect for #3, which listens for the same action, manages the HTTP call through switchMap, and then cues another action upon completion.

Edit

Here's a straightforward illustration. When the initial APP_LOADED action (initiated from AppComponent) is activated, this Effect initiates an HTTP call to retrieve data from the server and proceeds to trigger an action leveraging the received data as the action payload.

The actual HTTP communication is delegated to another service, the HttpMyConfigDataService, which simply utilizes HttpClient and returns an Observable.

@Injectable({
  providedIn: 'root'
})
export class LoadMyConfigEffect {
  constructor(
    private httpMyConfigDataService: HttpMyConfigDataService,
    private action$: Actions
  ) {
  }

  loadMyConfigData$ = createEffect(() => {
    return this.action$.pipe(
      filter((action) => action.type === 'APP_LOADED'),
      take(1),
      switchMap(() => this.httpMyConfigDataService.get().pipe(
        map(data => {
          return {type: 'MY_CONFIG_DATA_LOADED', payload: data};
        }),
        catchError(err => {
          console.error('Error loading config data.', err);
          return of({type: 'CONFIG_LOAD_ERROR', payload: err.message, isError: true);
        })
      ))
    );
  });
}

Answer 2

Utilizing the tap operator is intended for managing side effects that occur outside of your observable pipeline's scope. This implies that your pipeline will not wait for outcomes from the tap operation itself. It is advisable to reserve its usage primarily for debugging purposes.

If awaiting a specific state change, it is recommended to set up a distinct observable that monitors and selects the desired state alteration within your store.

For triggering supplementary actions in response to certain events, employing ngrx Effects is advised.

To delve deeper into this topic, refer to my post where I elaborate on implementing a similar scenario:

In lieu of directly updating the store, focus on establishing reducers responsible for applying state modifications.

View each of the following tasks as discrete entities that can be implemented autonomously:

Upon user editing, initiate an edit action.
The reducer should update the state consequent to the edit action (e.g., indicating an ongoing save).
Following the edit action trigger, prompt an effect to conduct an HTTP request for saving changes and subsequently signaling a completion action.
Upon completion of the save process, instigate router navigation.

This modular approach enables you to test and validate individual components with ease.

If #1 triggers an action consumed by your reducer (#2), consider setting up an ngrx Effect for #3, which listens for the same action, manages the HTTP call through switchMap, and then cues another action upon completion.

Edit

Here's a straightforward illustration. When the initial APP_LOADED action (initiated from AppComponent) is activated, this Effect initiates an HTTP call to retrieve data from the server and proceeds to trigger an action leveraging the received data as the action payload.

The actual HTTP communication is delegated to another service, the HttpMyConfigDataService, which simply utilizes HttpClient and returns an Observable.

@Injectable({
  providedIn: 'root'
})
export class LoadMyConfigEffect {
  constructor(
    private httpMyConfigDataService: HttpMyConfigDataService,
    private action$: Actions
  ) {
  }

  loadMyConfigData$ = createEffect(() => {
    return this.action$.pipe(
      filter((action) => action.type === 'APP_LOADED'),
      take(1),
      switchMap(() => this.httpMyConfigDataService.get().pipe(
        map(data => {
          return {type: 'MY_CONFIG_DATA_LOADED', payload: data};
        }),
        catchError(err => {
          console.error('Error loading config data.', err);
          return of({type: 'CONFIG_LOAD_ERROR', payload: err.message, isError: true);
        })
      ))
    );
  });
}

Angular does not wait for the backend service call response in tap

Answer №1

Similar questions

Oops! Looks like there was an error: $http is not defined

The Angular 11 library module has been successfully imported into the consuming app but it is not being utilized

Issue with redirecting to another link in Angular routing

Encountering problem with rendering the header in the footer within a customized package built on react

When using ngClass and the has-error class on load, the class will still be loaded even if the expression evaluates

Getting an error message like "npm ERR! code ENOTFOUND" when trying to install Angular CLI using the command "

Verify if JavaScript is enabled on the browser and show a notification if it is not using a custom ASP control

Exploring Child Types in Typescript and JSX minus the React framework

javascript mysql and php clash when it comes to loading

Is there a way to position one DIV behind another?

Removing the JavaScript unicode character 8206 from a text string

Tips for effectively monitoring scope for data loading

The React Native File generator

Exploring a utility function for saving object information in a dynamic state

The $().bind function will not function properly unless the document is fully loaded

Occasional TypeError when receiving JSONP response using jQuery .ajax()

I am encountering an issue with an undefined variable called "stripe" in my Angular project, despite the fact

Unlock the power of jQuery chaining with the val() method

Apply a spread of nested elements onto another spread

Can the top header stay fixed to the top of the screen even when scrolling down?