Catch error in API request in vue.js

Question

I am trying to catch error in

this.$http.post('http://127.0.0.1:8000/api/address/store',address_data,{headers: {'Authorization': 'Bearer ' + this.$auth.getToken()}}).then(response => {
                    if(response.status == 422) {
                        console.log('hello')
                        console.log(response)
                    }
            })

But I can't catch in this way. Thanks.

This answer on stackoverflow will clear your doubts - https://stackoverflow.com/questions/43092995/vuejs-http-request-error-500-handling — Meet Zaveri, Mar 13 '18 at 05:26

score 8 · Accepted Answer · edited Jun 20 '20 at 09:12

It looks like you are using vue-resource to make your ajax requests. I've only used axios but glancing at the docs for vue-resource looks like your error callback is the second argument for .then()

Example

this.$http.post('/someUrl', [body], [config]).then(successCallback, errorCallback);

Try this in your code

this.$http.post('http://127.0.0.1:8000/api/address/store',address_data,
  {headers: {'Authorization': 'Bearer ' + this.$auth.getToken()}})
  .then(response => {
    // success
  }, response => {
    //error
    if(response.status == 422) {
      console.log('hello')
      console.log(response)
    }
  })

Here is link to the docs: https://github.com/pagekit/vue-resource

Catch error in API request in vue.js

1 Answers1

Example

Try this in your code