Check HTTP status code in the Axios promise catch block VueJs

Question

New to VueJS. I have the following code that retrieves data from the Controller using axios:

SubmitForm: function () {
    axios({
      method: 'post',
      url: '/Home/SubmitedForm',
      data: { "Fields": this.$data }
    }).then(res => {
      alert('Successfully submitted the form ');
      window.close();
      }).catch(err => {
        if (err.response.status == 409) {
          alert(`Already exists. See details: ${err}`)
        }
        else {
          alert(`There was an error submitting your form. See details: ${err}`)
        }

    });

When the Controller method SubmittedForm returns 409, I want to throw a specific alert else just throw a generic alert. Based on this page: https://gist.github.com/fgilio/230ccd514e9381fafa51608fcf137253 I wrote the above code. However, even thought the http status returned is 409, it still show the generic alert. I'm pretty sure I'm missing some understanding here. Can someone please help me find out what am I doing wrong here? Works as expected on localhost but after publishing on azurewebsites it again displays the generic error.

What do you see in the console if you put console.log(err.response.status) at the top of your catch handler? — skirtle
– skirtle, Commented Apr 15, 2020 at 21:46
@skirtle apparently when I run it locally it seems to work just fine, but when I run it on azurewebsites, it sends out the generic alert — dokyalashot
– dokyalashot, Commented Apr 16, 2020 at 19:27

Deykun · Accepted Answer · 2020-04-17 09:15:06Z

1

Maybe your API endpoint brakes CORS policy, you can't read status of such error then (despite the fact that it is visible in Networks tab in dev tools).

You can install a browser extension like "CORS everywhere" to test if it works then, but any call to API blocked by CORS will show a warning/error in the browser's console by default.

edited Apr 17, 2020 at 9:15

answered Apr 16, 2020 at 19:32

Deykun

1,26011 silver badges14 bronze badges

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

Comments

Nonik · Accepted Answer · 2020-04-15 21:48:09Z

0

Probably because err.response.status is a string and you are comparing to number

answered Apr 15, 2020 at 21:48

Nonik

6454 silver badges11 bronze badges

1 Comment

dokyalashot Over a year ago

I verified the typeof.. and it is a number.

Collectives™ on Stack Overflow

Check HTTP status code in the Axios promise catch block VueJs

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related