Javascript 承诺和错误处理 - try/catch答案

【问题标题】：Javascript promises and error handling - try/catchJavascript 承诺和错误处理 - try/catch
【发布时间】：2020-08-17 01:45:31
【问题描述】：

需要帮助，因为我无法理解某些内容...

我有：

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

我知道 axios 返回了一个承诺，因此我可以异步/等待 store/user 中的响应。但我真的被困在试图将错误发送到登录组件以停止 router.push 和重定向。

解决方案：

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

【问题讨论】：

将try catch 放入store/user.js 中，您应该将其放入Login.vue
太简单了，谢谢。
一般来说，你不应该使用try catch，除非你真的想自己处理错误。输入console.log(e) 毫无意义，会导致您遇到的问题。
是的，console.log(e) 只是为了发帖。在我的项目中，我将错误发送到通知组件以显示。

标签： javascript vue.js axios try-catch es6-promise

【解决方案1】：

无论您是否遇到错误，您的程序都会在登录后继续运行。您应该停止它并处理错误。

由于这种情况，此错误取决于 UI，因此您必须在组件上处理此 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;
    }
}

【讨论】：

【解决方案2】：

理想情况下，您应该在重定向之前检查令牌是否设置成功。下面我将令牌设置为null，如果您的 AuthService 调用登录失败。在您的提交事件中，我会在重定向到正确路径之前检查商店是否具有令牌值

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

【讨论】：