Axios - Prevent .then() from executing on http errors

Question

My problem:

I have set up an interceptor to catch error codes in HTTP responses. When the JWT expires, I have a code 401 coming back from the server. Here's my interceptor:

this.axios.interceptors.response.use(undefined, (error) => {
  if (error.response.status === 401) {
    this.$store.dispatch('auth/logout').then(() => {
      this.$router.push({name: 'login'})
      return Promise.reject(error)
    })
  }
})

My interceptor works fine, except the request that is being intercepted still resolves into the .then() part.

this.axios.get('/texts').then(function(){
    // This is still being executed and generates javascript errors because the response doesn't contain the right data
})

From the axios documentation, I found out you can prevent this by calling

this.axios.get('/texts').then(function(){
    // only on success
}).catch(function(){
    // only on errors
}).then(function(){
    // always executed
})

But this is pretty verbose and I don't want to do this on every request that my app makes.

My question is:

How do I prevent axios from executing the .then() callback when I have an error. Is it something I can do in the interceptor? Like event.stopPropagation() or something like that?

Answer 1

You can prevent the Axios Error by using the below set of code

this.axios.interceptors.response.use(undefined, (error) => {
  if (error.response.status === 401) {
    this.$store.dispatch('auth/logout').then(() => {
      this.$router.push({name: 'login'})
      return new Promise(() => { });
    })
  } else {
    return Promise.reject(error)
  }
})