I set up a global errorHandler in Vue3's main.js:
app.config.errorHandler = error => {
console.log("catch error")
}
In general methods, it works well. For example:
methods: {
showMessage() {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject("async error!")
}, 500)
})
}
}
It print catch error in console, But when I use Axios to make a request, it can't catch axios's Uncaught (in promise) Error. Such as:
methods: {
showMessage() {
this.$axios.get('/wrong-url/').then(response => {
console.log('wrong url')
})
}
}
The global errorHandler cannot catch the error at this time. The console displays the error:
Uncaught (in promise) Error: Request failed with status code 404
I've googled it, but I can't find the reason.
Estus Flask :
The promise is not returned and isolated inside a method, which is a mistake. With a few exceptions, promise chain should always be preserved, this allows errors to be handled:\n showMessage() {\n return this.$axios.get('/wrong-url/').then(response => {\n ...\n\nA fool-proof way is to use async..await because it forces a function to return a promise:\n async showMessage() {\n const response = await this.$axios.get('/wrong-url/');\n ...\n\nIt can be combined linter rule to avoid mistakes with promise chaining.",
2021-08-19T15:34:03