[英]How can I pass an error message from the server backend to vue frontend
I am working on error handling for an application built in Vue/Vuetify.我正在为 Vue/Vuetify 中构建的应用程序进行错误处理。 I am using external pagination for a datatable that links to an API that only allows so many hits in a period of time.我正在对链接到 API 的数据表使用外部分页,该数据表在一段时间内只允许如此多的点击。 Because of that, I'm trying to pass through and display an error of "Too Many Requests" on the front end for users when they hit that limit.因此,当用户达到该限制时,我试图通过并在前端向用户显示“请求过多”的错误。
The issue I'm having though is passing that error from the backend server to the frontend.我遇到的问题是将该错误从后端服务器传递到前端。 When it errors on the front end, it just gives a 500 error.当它在前端出错时,它只会给出 500 错误。 However, the server log is giving me the actual error happening.但是,服务器日志给了我正在发生的实际错误。 How can I get that to pass?我怎样才能让它通过? Below is the relevant javascript code from the server and the front end.下面是来自服务器和前端的相关 javascript 代码。
For note: I've been using eventbus to display errors throughout the project.注意:我一直在使用 eventbus 来显示整个项目中的错误。 But up until now, I haven't had to pass any from the back to front.但到目前为止,我还没有从后到前传递任何东西。
Backend Server后端服务器
module.exports = {
async find(ctx) {
var page = ctx.query.page;
var key = '';
var locale = ({ location: '', location_type: '', page: page });
const sdk = require('api')('@');
try {
var response = await sdk.auth(key)['grants_funders'](locale);
}
catch (err) {
console.log(err);
}
;
// .then(res => console.log(res))
// .catch(err => console.error(err));
// console.log(response);
return response
}
};
FRONTEND前端
export default {
name: "Search",
components: {},
props: ["funderDirectories", "serverItemsLength"],
data() {
return {
page: 1,
usericon: usericon,
greentick: greentick,
listicon: listicon,
training: training,
keyword: null,
funderHeaders: [
{ text: "Organization", value: "funder_name" },
{ text: "City", value: "funder_city" },
{ text: "Country", value: "funder_country" },
{ text: "Count", value: "grant_count" },
],
myloadingvariable: false,
pageCount: 1,
itemsPerPage: 25,
};
},
watch: {
page() {
Vue.$funderService.find({ page: this.page }).then((res) => {
this.funderDirectories = res.data.rows;
this.serverItemsLength = res.data.total_hits;
});
},
},
methods: {},
computed: {
filteredFunderDirectories() {
if (!this.keyword) {
return this.funderDirectories;
}
return this.funderDirectories.filter(
(q) =>
q.funder_name.toLowerCase().indexOf(this.keyword.toLowerCase()) !== -1
);
},
},
};
I haven't tested my example yet, but you could try to return the error in the catch block like this:我还没有测试我的示例,但是您可以尝试在 catch 块中返回错误,如下所示:
try {
var response = await sdk.auth(key)['grants_funders'](locale);
return response;
}
catch (err) {
console.log(err);
return err;
}
Ultimately figured it out.最终想通了。 added the following to the backend catch将以下内容添加到后端捕获
return ctx.send({errorStatus:"Too Many Requests. Please Wait"},429)
And I was able to call我可以打电话
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.