vue axios interceptors

vue-axios-interceptores

Capture e trate erros de ajax globalmente ao usar Axios com Vue .

Instalação

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

O pacote registra um novo barramento de eventos global chamado intercepted no objeto window e emite vários eventos nele quando uma chamada ajax leva a um erro. Você pode escutar facilmente esses eventos para criar um fluxo de trabalho de tratamento de erros tranquilo, por exemplo, em um componente global responsável por exibir mensagens de erro:

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

Você também pode ouvir códigos de status e categorias de resposta específicos, por exemplo, se quiser lidar com respostas 4xx de maneira diferente das respostas 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 obter uma lista completa de códigos de status, visite https://httpstatuses.com/.

Usando este pacote com Laravel

Se você estiver usando Laravel >=5.5 como backend, você está com sorte. Se o seu servidor retornar uma resposta 422 (normalmente um erro de validação), o pacote analisará automaticamente as falhas retornadas em um objeto de valor-chave iterável que você pode acessar em data.body . Isso é muito mais simples de usar para exibir todas as mensagens ou fazer referência a um único erro de campo do que com a estrutura original da mensagem de erro.