My problem:

I have set up an interceptor to catch error codes in HTTP responses. When the JWT expires, I have a code 401 ing 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?

My problem:

I have set up an interceptor to catch error codes in HTTP responses. When the JWT expires, I have a code 401 ing 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?

• javascript
• promise
• axios
• interceptor

• "this is pretty verbose" Maybe... But that's how you do it. If you're looking for a less verbose syntax then consider using async/await (and a transpiler if required). – spender Commented Nov 19, 2018 at 9:51

3 Answers 3

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)
  }
})

Did you try catch in the end of the chain? You will get following

this.axios.get('/texts').then(function(){
    // only on success
}).then(function(){
    // only on success in previous then 
}).catch(function(){
    // executes on every error from `get` and from two previous `then`
})

Throw an exception from catch block to prevent 'then' block

this.axios.get('/texts').then(function(){
    // only on success
}).catch(function(e){
    // only on errors
    throw e; 
}).then(function(){
    // Will not executed if there is an error but yes on success
})