Configuré un controlador de errores global en main.js de Vue3:
app.config.errorHandler = error => { console.log("catch error") }En métodos generales, funciona bien. Por ejemplo:
methods: { showMessage() { return new Promise((resolve, reject) => { setTimeout(() => { reject("async error!") }, 500) }) } } Imprime catch error en la consola, pero cuando uso Axios para hacer una solicitud, no puede detectar el error Uncaught (in promise) Error de axios. Como:
methods: { showMessage() { this.$axios.get('/wrong-url/').then(response => { console.log('wrong url') }) } }El controlador de errores global no puede detectar el error en este momento. La consola muestra el error:
Uncaught (in promise) Error: Request failed with status code 404Lo he buscado en Google, pero no puedo encontrar la razón.
La promesa no se devuelve y se aísla dentro de un método, lo cual es un error. Con algunas excepciones, la cadena de promesa siempre debe conservarse, esto permite manejar los errores:
showMessage() { return this.$axios.get('/wrong-url/').then(response => { ... Una forma infalible es usar async... async..await porque obliga a una función a devolver una promesa:
async showMessage() { const response = await this.$axios.get('/wrong-url/'); ...Se puede combinar la regla linter para evitar errores con el encadenamiento de promesas.
config.errorHandler es para manejar errores de interfaz. Todavía tiene que crear un interceptor cuando se crea la aplicación:
... created() { axios.interceptors.response.use((response) => { return response; }, function(error) { // Do something ... return Promise.reject(error); }); } ... app.config.errorHandler = (err, instance, info) => { // Do something ... };