Uso los interceptores axios para manejar algunos errores, especialmente los errores sin respuesta. Y en algunas partes de mi proyecto, uso el mensaje contenido en error.response.data para validaciones y mostrar un mensaje almacenado en el backend. Pero este interceptor no me impide tener que comprobar si el error tiene respuesta.
Mi interceptor:
axios.interceptors.response.use( function (response) { ... }, function (error) { if (!error.response) { ... return Promise.reject(new Error(error.message)) }Un ejemplo de una solicitud que depende de tener el error.response:
this.$store.dispatch('updateField', { [this.fieldKey]: this.value ? this.value : null }).catch((error) => { this.validateField(error.response.data) }) Pero tendría que poner la llamada de validateField dentro de un if(eror.response) para evitar un error en la consola, y distribuir esto en todo mi código.
response se puede tratar como opcional, porque en realidad lo es:
this.validateField(error.response?.data)O se puede crear un error normalizado que contiene las propiedades necesarias y no depende de la estructura del error de Axios en un interceptor:
function (rawError) { const error = new Error(error.response?.data?.myError || error.message); error.data = error.response?.data || null; error.headers = error.response?.headers || null; error.status = error.response?.status || 0; return Promise.reject(error); }