If an error occurs at the top level subscription, then RxJs won't employ switchMap

If my initial Observable encounters an error, then I will not subscribe to the switchMap Observable.

Is this achievable?

this._profileService.updateProfile(profile).pipe(
  tap(profile => {
    this.profile = profile;
    this.saving = false;
    this.updateForm(this.profile);
  }),
  catchError(error => {
    console.log(error);
    this.saving = false;
    this.updateForm();
    return this._pjNotificationService.show(PjNotificationType.ERROR, 'Error while saving',
      `An error occurred while saving. ${error}`, 15000)
  }),
  switchMap(() => this._pjNotificationService.show(PjNotificationType.SAVED, 'Changes saved', '', 15000))
).subscribe();

Answer №1

When arranging the sequence of operators, the observable produced by catchError will flow directly to the next operator in line, which is switchMap.

To alter this behavior, you can adjust the order of operators so that switchMap precedes catchError:

this._profileService.updateProfile(profile).pipe(
  tap(profile => {
    this.profile = profile;
    this.saving = false;
    this.updateForm(this.profile);
  }),
  switchMap(() => this._pjNotificationService.show(PjNotificationType.SAVED, 'Changes saved', '', 15000)),
  catchError(error => {
    console.log(error);
    this.saving = false;
    this.updateForm();
    return this._pjNotificationService.show(PjNotificationType.ERROR, 'Error saving changes',
      `An error occurred while saving. ${error}`, 15000)
  })
).subscribe();

In this setup, if an error is thrown by

this._profileService.updateProfile(profile)
, the control will directly pass to catchError, allowing switchMap to be bypassed.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript hovering drop-down feature

Hi there, I'm just starting out with javascript and could use some help with a simple script. I have a shopping cart drop down that currently activates when clicked. However, I want it to fade in when hovered over instead. I've tried using .hove ...

JavaScript - rearrange array of objects based on specified property

I am currently designing a select dropdown input element for a webpage and I want to create a specific 'popular' options group that will be displayed at the top of the dropdown menu. The data structure I am working with is as follows. I am tryi ...

Using d3.js to dynamically change the color of svg elements based on their data values

I was searching for a way to dynamically color SVG rectangles based on values from a dataset. If I were to create rectangles for each data entry, how could I adjust the rectangle's color according to the data value? Here is what I currently have: // ...

Examples of Javascript closures in action with a for loop

I decided to stop my research here. Below is the question I have: After reading this post, I grasped the concept illustrated by the code snippet provided. var funcs = {}; for (var i = 0; i < 3; i++) { // creating 3 functions funcs[i] = functi ...

Controlling Fabric in Three.JS

(I'm still learning so forgive me if this is a beginner question.) I'm currently working on fitting a cloth material to a character model in Three.JS. What would be the most effective approach for this? Should I create a complete garment as cloth ...

What is the standard approach for exchanging localized user interface strings between Microsoft's MVC and JavaScript?

In the process of developing an application that utilizes a dynamic, javascript-based client, I am facing the need for localization. This particular application includes significant UI components that are not generated by Javascript and are instead served ...

Customize the initial color of the text field in Material UI

I am currently working with the mui TextField component and facing an issue. I am able to change the color when it is focused using the theme, but I cannot find a way to adjust its color (label and border) in its initial state when it's not focused. I ...

Submitting a form with Multer when the user chooses to upload a file or not

I have integrated multer into my express app for handling form submissions. The issue I am facing is with the optional image upload feature in the form. Users have the choice to add a photo if they want, but they should also be able to submit the form wi ...

Learn how to creatively style buttons with dynamic effects using tailwindcss

My Desired Button: I have a Button component that can accept a variant prop. My goal is to have the button's className change dynamically based on the prop passed to it. Instead of using if/else statements for different buttons, I want to use a sing ...

Exploring new options to deduct time from Kendo UI timepickers without relying on Javascript

My current project involves an Asp.net MVC 4 application that includes a Time entry screen. This screen utilizes various Kendo controls and Razor Html helpers to enhance the user experience, such as: @(Html.Kendo().TimePickerFor(m => m.StartTime).Name( ...

Access Azure-Active Directory through cypress tests

Currently, I'm faced with the task of creating automated tests for an application that requires login to Azure Active Directory. These tests are being written using Cypress and TypeScript. In search of a solution, I am seeking advice on how to execute ...

Failed to retrieve values from array following the addition of a new element

Does anyone have a solution for this problem? I recently added an element to my array using the push function, but when I tried to access the element at position 3, it wasn't defined properly processInput(inputValue: any): void { this.numOfIma ...

I'm confused why my pinia is still displaying as undefined. Is there a way for my app to pause until pinia has finished loading before I filter the products by ID?

Here is my issue with a Vue single file component that should display products sold by a specific brand ID. Despite fetching the products and filtering them based on the brand.id, the products array remains undefined. <script setup> import { useRoute ...

Error: Unable to iterate over the elements of `this.state` as it is

NEW UPDATE I encountered an issue with the response being an array, but it was actually coming from the backend (Express/Build folder) Revisiting an old issue that I faced some time ago. In my development environment, everything works fine. But once I d ...

Chrome is having trouble setting the cookie with the Set-Cookie header

I am making an AJAX call to another service's API, expecting to receive a cookie that will be stored in my browser for future API calls. Unfortunately, even though the response headers contain a 'Set-Cookie' header, the cookie is not being s ...

Can schemas be utilized within Deno development?

I have a data structure that I am looking to store and work with in Deno using MongoDB. Here is a similar example of the data format: [ { id: "AAPL", stockData: [ { date: 1634601600, summary: [Object] }, ...

Dynamic Resizing of Facebook Page Plugin for Responsive Design

I'm currently using the Page Plugin widget from Facebook. The Facebook page mentions: If you wish to adjust the widget's width when the window is resized, you must manually refresh the plugin. Is there a way to dynamically modify the width of ...

Issues with rendering TextGeometry in Three.js

Despite my attempts to replicate the demo code, I am unable to successfully render TextGeometry. The necessary font file is correctly uploaded on the server. var loader = new THREE.FontLoader(); loader.load( 'fonts/open-sans-regular.js' ...

The pie chart fails to fully display

Check out the repro example I made here. The legend is displaying properly, but the graph is not showing up. What could be causing this unexpected issue? ...

Could someone explain to me why searchQuery.value is coming up as undefined?

Within my development task, I am endeavoring to create a functional search icon on the header bar that allows users to input Pokémon names for searching purposes. Despite my efforts, I am consistently facing a console error message suggesting "searchQu ...