vue axios interceptors

vue-axios-interceptors

Erfassen und behandeln Sie Ajax-Fehler global, wenn Sie Axios mit Vue verwenden.

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

Verwendung

Das Paket registriert einen neuen globalen Ereignisbus namens intercepted für das window und gibt darauf mehrere Ereignisse aus, wenn ein Ajax-Aufruf zu einem Fehler führt. Sie können ganz einfach auf diese Ereignisse warten, um einen reibungslosen Fehlerbehandlungs-Workflow aufzubauen, beispielsweise in einer globalen Komponente, die für die Anzeige von Fehlermeldungen zuständig ist:

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

Sie können auch auf bestimmte Statuscodes und Antwortkategorien warten, wenn Sie beispielsweise 4xx-Antworten anders behandeln möchten als 5xx-Antworten:

 // 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 => {
  // 
} ) ;

Eine vollständige Liste der Statuscodes finden Sie unter https://httpstatuses.com/.

Verwendung dieses Pakets mit Laravel

Wenn Sie Laravel >=5.5 als Backend verwenden, haben Sie Glück. Wenn Ihr Server eine 422 -Antwort (typischerweise einen Validierungsfehler) zurückgibt, analysiert das Paket die zurückgegebenen Fehler automatisch in ein iterierbares Schlüsselwertobjekt, auf das Sie über data.body zugreifen können. Dies ist viel einfacher zu verwenden, um alle Meldungen anzuzeigen oder auf einen einzelnen Feldfehler zu verweisen, als mit der ursprünglichen Fehlermeldungsstruktur.