vue axios interceptors

interceptores-vue-axios

Detecte y maneje errores de ajax globalmente cuando use Axios con Vue .

Instalación

npm install vue-axios-interceptors --save
// or
yarn add vue-axios-interceptors

 // Make sure you import this package after you've imported Vue:
window . Vue = require ( 'vue' ) ;

require ( 'vue-axios-interceptors' ) ;

// Make sure the axios package is available globally on the window object:
window . axios = require ( 'axios' ) ;

Uso

El paquete registra un nuevo bus de eventos global llamado intercepted en el objeto window y emite varios eventos en él cuando una llamada ajax genera un error. Puede escuchar fácilmente estos eventos para crear un flujo de trabajo de manejo de errores fluido, por ejemplo, en un componente global responsable de mostrar mensajes de error:

 // ErrorMessages.vue
mounted ( ) {
    window . intercepted . $on ( 'response' , data => {
        console . log ( data ) ; // { status: 404, code: 'Not found', body: null }
        
        // Display the message.
    } ) ;
}

También puede escuchar códigos de estado específicos y categorías de respuesta, por ejemplo, si desea manejar las respuestas 4xx de manera diferente a las respuestas 5xx:

 // Listen for any intercepted responses.
window . intercepted . $on ( 'response' , data => {
  // 
} ) ;

// Listen for any intercepted responses under the Client Error category (4xx).
window . intercepted . $on ( 'response:client-error' , data => {
  // 
} ) ;

// Listen for any intercepted responses under the Server Error category (5xx).
window . intercepted . $on ( 'response:5xx' , data => {
  // 
} ) ;

// Listen for a specific status.
window . intercepted . $on ( 'response:404' , data => {
  // 
} ) ;

// Listen for a specific HTTP code.
window . intercepted . $on ( 'response:unprocessable-entity' , data => {
  // 
} ) ;

Para obtener una lista completa de códigos de estado, visite https://httpstatuses.com/.

Usando este paquete con Laravel

Si estás usando Laravel >=5.5 como backend, estás de suerte. Si su servidor devuelve una respuesta 422 (normalmente un error de validación), el paquete analizará automáticamente los errores devueltos en un objeto clave-valor iterable al que puede acceder en data.body . Esto es mucho más sencillo de usar para mostrar todos los mensajes o hacer referencia a un solo error de campo que con la estructura de mensaje de error original.