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

Question

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

文件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.");
}
}
}

为了调用这个函数，我创建了一个models文件夹，在那里我为每个模型(如User.js、Activity.js等(都有单独的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中构造文件的一点研究中得出了这个代码结构，其余的都是根据我的知识和经验。如果这种方法有问题，我希望能有一种更好的方法来组织这些代码。

Answer 1

整个结构看起来不错。

在Login.vue组件中，您可以尝试以下，而不是进行单独的尝试和捕获

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