Javascript promises and error handling - try/catch

Question

Need help because I can't understand something...

I have:

// AuthService.js
login(user) {
    return Api.post('/login', user);
},


// store/user.js
async login(context, user) {
    try {
        let response = await AuthService.login(user);
        context.commit('SET_TOKEN', response.data.api_token);

        response = await AuthService.me();
        context.commit('SET_USER', response.data.user)
    }catch (e) {
        console.log(e);
    }
},

// Login.vue
async onSubmit() {
    await this.$store.dispatch('user/login', this.user);
    this.$router.push({name: 'Home'});
}

I know axios returned a promise so I can async/await for the response in store/user. But I'm really stucked trying to send the error to the Login component to stop router.push and the redirect.

SOLUTION:

// AuthService.js
login(user) {
    return Api.post('/login', user);
},


// store/user.js
async login(context, user) {
    let response = await AuthService.login(user);
    context.commit('SET_TOKEN', response.data.api_token);

    response = await AuthService.me();
    context.commit('SET_USER', response.data.user)
},

// Login.vue
async onSubmit() {
    try {
        await this.$store.dispatch('user/login', this.user);
        this.$router.push({name: 'Home'});
    } catch (e) {
        console.log(e);
    }
}

Answer 1

Your program will continue after login either you got an error or not. You should stop that and handle the errors.

Because of this situation, this error depends on UI so you must handle this ajax request on your component to handle that error.

I think you need to change a little bit of your code architecture to fix the problem (you don't need to trigger the login action):

 // Login.vue async onSubmit() { try { let response = await AuthService.login(user); context.commit('SET_TOKEN', response.data.api_token); response = await AuthService.me(); context.commit('SET_USER', response.data.user); this.$router.push({name: 'Home'}); } catch (e) { // handle what happens when you got errors // or throw e; } }

Answer 2

Ideally, you should check if token is set successfully before redirecting. Below I'm setting the token as null if login fails with your AuthService calls. And in your submit event, I check if store has the token value before redirecting to right path

async login(context, user) {
  try {
    let response = await AuthService.login(user);
    context.commit('SET_TOKEN', response.data.api_token);

    response = await AuthService.me();
    context.commit('SET_USER', response.data.user)
  }catch (e) {
    console.log(e);
    // --> set the token as null, since it failed the login
    context.commit('SET_TOKEN', null);

  }
},

// Login.vue
async onSubmit() {
  await this.$store.dispatch('user/login', this.user);
  // --> Here check if the SET_TOKEN is present before redirecting to home
  if(this.$store.state.token == null) {
    this.$router.push({name: 'Login'});

  } else {
    this.$router.push({name: 'Home'});
  }
}