The code within the then() promise resolver function will always execute, regardless of whether the promise succeeds or

After clicking a button, I trigger a vuex action which returns an axios promise from the store. In my component, I only want to reset form fields when the action is successful. However, currently the form fields are always reset, even if the promise fails. I am using "then" and "catch" for this purpose, with the resetForm method being called in the "then" resolve block. Unfortunately, it resets regardless of the outcome...

Below is the code snippet from my component:

const self = this;


        this.sendContactMail(payload)
        .then((response) => {
            // This always triggers, irrespective of promise success
            self.resetData();
        }, 
        (error) => {

        });

And here is my vuex action code:

sendContactMail({ commit }, payload)
    {        
        commit('Loader/SET_LOADER', { status:1 }, { root: true });
        return axios.post('/api/contacts/send-contact-mail', payload)
        .then((response) => {
            commit('Loader/SET_LOADER', { status:2, response: response }, { root: true });
        }, 
        (error) => {
            commit('Loader/SET_LOADER', { status:3, errors: error }, { root: true });
        });
    }

Answer №1

By effectively managing your errors, you prevent them from propagating back up the promise chain. If you desire the error to continue upward even after handling it, you must re-throw it within your error handling logic like this:

return axios.post("/api/contacts/send-contact-mail", payload).then(
  response => {
    commit("Loader/SET_LOADER", { status: 2, response: response }, { root: true );
  },
  error => {
    commit("Loader/SET_LOADER", { status: 3, errors: error }, { root: true });
    throw error;
  }
);

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

Pass user input values to PHP via AJAX and display the outcome on a designated div

I am currently working on a project where I need to send an input value to a PHP script and display the returned value in a div using AJAX. However, I seem to be struggling with getting it to work properly. Any assistance or suggestions would be greatly ap ...

The SWT Browser is failing to display Angular 2 pages within the Eclipse view

I attempted to embed Angular 2 HTML pages within the SWT Browser widget, but it seems that the Angular 2 HTML pages are not displaying correctly inside the SWT Browser. However, I had no trouble embedding Angular 1 (or Angular JS) pages within the SWT bro ...

Sharing environment variables in gulpfile with other JavaScript files outside NODE_ENV

Is it possible to pass a variable other than NODE_ENV from the gulpfile.js to another javascript file? gulpfile.js // Not related to NODE_ENV! let isDevelopment = true; somejsfile.js /* I need to access "isDevelopment" from the gulpfile.js... For the ...

Insert half a million records into a database table using JavaScript seamlessly without causing the webpage to crash

I am facing an issue with my report system where running a single report query results in over 500,000 rows being returned. The process of retrieving the data via AJAX takes some time, but the real problem arises when the browser freezes while adding the H ...

What is the method for applying a Redux statement?

Experience with Redux toolkits: I've encountered an issue while working with Redux toolkits where I'm unable to access certain statements. I attempted the following code snippet, but it resulted in an error. const orderDetails = useSelector(( ...

The JQuery datepicker fails to retain the date that is selected

I have a project built with Cakephp 3.6 running locally on my localhost and also deployed on a server. In this project, I am utilizing a datepicker widget as shown below: <?php echo $this->Form->control('created', ['type' ...

Is it possible to utilize the package.json "resolutions" field to replace lodash with lodash-es?

Is it possible to use resolutions in a similar manner as dependencies, but with a different package? I'm specifically curious if this can be done with NPM or Yarn. "resolutions": { "lodash": "npm:lodash-es@^14.7.x" ...

What are the disadvantages associated with the different methods of submitting data?

My goal is to create an Online testing platform. I have come across two different approaches to verify user-selected answers. Approach 1 <div class="qContainer" index="0"> Who holds the record for scoring 100 centuries in International cricke ...

Node and Express Fundamentals: Delivering Static Resources

const express = require('express'); const app = express(); app.use(express.static('public')); I've been attempting to complete the "Basic Node and Express: Serve Static Assets" challenge on freecodecamp, but it keeps showing as " ...

Vuex getter not reflecting changes in filter after modifying state array

I am currently working on a to-do application where I have implemented a button to toggle the checked/completed state of all todos. However, I have encountered an issue where although I am mutating an array of the state, the getters are not updating accord ...

Utilize the fetch function within the useEffect hook to generate a new

How can I effectively implement a component using useEffect? useEffect(() => { fetch('https://website') .then((res) => res.json()) .then((data) => { setData(data) // Utilize fetched data t ...

What is the best way to store information in my express server using Angular?

After spending several hours on this issue, I am feeling stuck. Initially dealing with a CORS problem, I managed to solve it. However, my goal is to utilize $resource without creating a custom post method. My API follows RESTful standards where POST /artis ...

The Ajax request fails to set a value within the done callback

Here is a function I have: var isNameUnique = false; function ValidateName() { var url = "/SomeRules/CheckIfNameExists/"; var request = $.ajax({ url: url, method: "GET", data: { sName: name}, ...

Emphasize the URL of the current page and navigate up one level

I have a list of links in my navigation. I want the current page's link to be highlighted, as well as the parent page's link one level up. For example: All pages: /blog, blog/careers, blog/authors Page: /blog/author Highlight: /blog/author, /blo ...

Encountering an issue with React and material-ui-pickers date-io Jalaali Utils: receiving a TypeError stating that utils.getDayText is not recognized as

This issue is different from what was discussed in https://github.com/mui-org/material-ui-pickers/issues/1440 because I am not facing any problems with the original implementation. Referencing the link provided here , I have utilized JalaliUtils from @da ...

Implementing the insertion of a <div> element within an input field using jQuery

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></scr ...

What is the best way to repurpose the vuex module for multiple components?

Currently, I am tackling the pagination aspect of a project that involves handling a large amount of data. My initial instinct was to store this data within Vuex. However, I ended up implementing all the logic in the Vuex store module. Now, my goal is to f ...

find all the possible combinations of elements from multiple arrays

I have a set of N arrays that contain objects with the same keys. arr[ {values:val1,names:someName},   {values:val2,names:otherName}, ] arr2[   {values:valx,names:someNamex}, {values:valy,names:otherNamey}, ] My goal is to combine all possible c ...

The <Link> component in NextJS is not functioning as anticipated

I am currently developing a Next.js application and I'm facing an issue with creating dynamic routes upon clicking a card component. Even after wrapping my Cards with the <Link> from Next.js, the page doesn't navigate when clicked. I experi ...

axio. to retrieve the information stored in an alternate document

Seeking assistance in utilizing API data in a separate file. I have three files: api.jsx import axios from 'axios'; export const api = (url, data) => { const { path, method } = url; let result ={}; axios({ method: ...