Javascript обещаний и обработка ошибок - пробуй / лови - PullRequest
Новая
       65

Javascript обещаний и обработка ошибок - пробуй / лови

0 голосов
/ 02 мая 2020

Нужна помощь, потому что я не могу что-то понять ...

У меня есть: 

// 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'});
}

Я знаю, что топор ios вернул обещание, чтобы я мог асинхронизировать / ожидать ответ в магазине / пользователь. Но я действительно застрял, пытаясь отправить ошибку компоненту Login, чтобы остановить router.pu sh и перенаправление.

РЕШЕНИЕ: 

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

Ответы [ 2 ]

1 голос
/ 02 мая 2020

Ваша программа будет продолжена после входа в систему, либо вы получили ошибку, либо нет. Вы должны остановить это и обработать ошибки.

Из-за этой ситуации эта ошибка зависит от пользовательского интерфейса, поэтому вы должны обработать этот запрос ajax для вашего компонента, чтобы обработать эту ошибку.

Я думаю вам нужно немного изменить архитектуру своего кода, чтобы решить проблему (вам не нужно инициировать действие входа в систему): 

// 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;
    }
}
0 голосов
/ 02 мая 2020

В идеале, вы должны проверить, правильно ли установлен токен перед перенаправлением. Ниже я устанавливаю токен как null, если не удается войти в систему с вашими вызовами AuthService. И в вашем событии отправки я проверяю, имеет ли store значение токена, прежде чем перенаправить на правильный путь 

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'});
  }
}
...