How do I call a method in vue from a 401 error catch in axios?

Question

The code I was attempting was this;

axios({
                method:'get',
                url:'/user',
                baseURL:'https://api.github.com',
                auth:{
                    username:'username',
                    password:'password'
                }
            }).then((response)=>{
                this.errorMessage='';
                console.log(response);
            }).catch(function(error){
                this.errorMessage='Authentication failed';
            })

But I keep getting the error "Uncaught (in promise) TypeError: Cannot set property 'errorMessage' of undefined"

Now the usual suspect is already solved; 'errorMessage' was declared on Data and given the value of '', so it's not that. And the 'this.errorMessage' on the response part of things works (I tested it to say 'auth successful'), it just doesn't work on the catch error part of things.

score 3 · Answer 1 · answered Aug 21 '18 at 15:17

context inside function changes when you use function keyword. Use arrow function to keep the context inside error handler same as parent scope. You are using it on your then handler, that's why it's working there.

.catch((error)=>{
    this.errorMessage='Authentication failed';
})

How do I call a method in vue from a 401 error catch in axios?

1 Answers1