Vue, how to handle errors when using axios calls

Question

I am trying to work out on how to handle errors when using axios. Please see the code below:

//Admin.vue

methods: {
    saveClicked: function(){

      updateConfig(this.editedConfig)
        .then(response => {
          console.log("in here");
          console.log(response);
          this.info.showAlert = true;
          this.info.message = "Successfully updated config!!"
          this.info.alertType = "success";
          this.showJsonEditor = !this.showJsonEditor;

        })
        .catch(error => {
          this.info.showAlert = true;
          this.info.message = "Failed to update config, please try again later"
          this.info.alertType = "error";
        });
    }
}

//network.js

function updateConfig(editedConfig){

  return axios.put(URL,editedConfig, {
    headers: {
      "Content-type": "application/json"
    }
  })
      .then(response => response)
      .catch(error => error);
}

When the requests is successful, everything is fine. I get my alert saying all is good.

I forced my backend to return an error for every request so i can simulate error behaviour in my Vue application and this is what i observed:

Even when error is received. The the program is going through then() in Admin.vuecheck the image below:

What have i missed?

mathk · Accepted Answer · 2019-01-10 11:24:37Z

4

Question: Why did you added:

   .then(response => response)
   .catch(error => error);

in your network.js file?

I guess You have some misunderstanding of Promise.

From the API Promise.prototype.then will return an other promise. This new Promise will serve either as a way to compose something to do on success or catch exception.

From the API Promise.prototype.catch will return an other promise. This new Promise is a bit different. From the doc:

The Promise returned by catch() is rejected if onRejected throws an error or returns a Promise which is itself rejected; otherwise, it is resolved.

So in your case it will call the resolve from the next then call. Unless you throw error in the network.js file which is pointless.

Remove the 2 line in the network.js file and you will have your intended behaviour.

answered Jan 10, 2019 at 11:24

mathk

8,1416 gold badges47 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue, how to handle errors when using axios calls

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related