从 Axios 返回响应，即使在使用多个文件进行 API 调用时出现异常

Question

我是一名初学者，目前正在学习 Vue.js。 我将 Vue 与我的 Laravel 后端一起使用。 对于调用 API，我想为不同型号的 API 调用分开。 因此，我创建了api.js ，其中我有一个简单的 API class。

文件api.js

export default class API {
    static async invoke(url, method, data=null, headers=null, acceptJson=true){
        headers = headers || {}
        if(acceptJson){
            headers['Accept'] = 'application/json';
        }
        try{
            return axios({
                method: method,
                url: url,
                data: data,
                headers: headers
            });
        }
        catch(e){
            console.log("Something went wrong while connecting to the server.");
        }
    }
}

为了调用这个 function，我创建了一个models文件夹，其中我有每个 Model 的单独 JS 文件，例如User.js ， Activity.js等。

文件User.js

import API from '../api';

export default class User {
    /**
     * Login user to the system
     *
     * @param username string
     * @param password string
     */
    static async login(username, password){
        return await API.invoke('/api/login', 'POST', {
            'email': username,
            'password': password
        });
    }
  }

我从我的Login.vue组件中调用此方法。

文件Login.vue中的 SingIn 方法

async signIn(){
    try{
        const response = await User.login(this. Username, this.password);
        if(response.status === 200){
            this.$router.push('/dashboard');
        }
    }
    catch(err){
        this.loginError = err.response.data.message;
    }
}

顺便说一句，这是我的目录结构：

js
│   api.js
│   app.js
│   bootstrap.js
│   router.js
│   
├───components
│   │   App.vue
│   │   
│   └───pages
│           Activities.vue
│           Login.vue
│           Main.vue
│           Settings.vue
│
└───models
        User.js

使用此代码，当我的凭据正确时，一切正常。 但是，当我的凭据错误或服务器以 2XX 以外的响应代码响应时出现任何类型的错误时，Axios 会引发异常。

我想在我的Login.vue组件中显示来自后端的错误，但是当出现异常时， User.js中会发生异常并且代码不会进一步执行，因为在Login.vue中无法访问错误消息。 如何构建我的代码，以便我可以在我的组件中显示我的错误消息，而我的 API 调用代码分隔在不同的文件中？

另外，根据我的知识和经验，我从关于 Vue.js 和 rest 中的结构文件的一些研究中得出了这个代码结构。 如果这种方法有问题，我将不胜感激一种更好的方法来组织这些代码。

Answer 1

整个结构看起来不错。

在 Login.vue 组件中，您可以尝试以下操作，而不是单独的 try 和 catch

 signIn(){
     User.login(this. Username, this.password)
      .then((response) => {
       if(response.status === 200)
         this.$router.push('/dashboard');
      })
      .catch((err)=>{
        this.loginError = err.response.data.message
      })
}