vue axios interceptors

vue-axios-intercepteurs

Détectez et gérez les erreurs ajax globalement lors de l'utilisation Axios avec Vue .

Installation

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' ) ;

Usage

Le package enregistre un nouveau bus d'événements global appelé intercepted sur l'objet window et émet plusieurs événements sur celui-ci lorsqu'un appel ajax conduit à une erreur. Vous pouvez facilement écouter ces événements pour créer un workflow de gestion des erreurs fluide, par exemple dans un composant global chargé d'afficher les messages d'erreur :

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

Vous pouvez également écouter des codes d'état et des catégories de réponses spécifiques, par exemple si vous souhaitez gérer les réponses 4xx différemment des réponses 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 => {
  // 
} ) ;

Pour une liste complète des codes d'état, visitez https://httpstatuses.com/.

Utiliser ce package avec Laravel

Si vous utilisez Laravel >=5.5 comme backend, vous avez de la chance. Si votre serveur renvoie une réponse 422 (généralement une erreur de validation), le package analysera automatiquement les échecs renvoyés dans un objet clé-valeur itérable auquel vous pouvez accéder sur data.body . C'est beaucoup plus simple à utiliser pour afficher tous les messages ou référencer une seule erreur de champ qu'avec la structure de message d'erreur d'origine.