vue axios interceptors

vue-axios-перехватчики

Перехватывайте и обрабатывайте ошибки ajax глобально при использовании Axios с Vue .

Установка

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

Использование

Пакет регистрирует новую глобальную шину событий, называемую intercepted в объекте window и генерирует на ней несколько событий, когда вызов ajax приводит к ошибке. Вы можете легко прослушивать эти события, чтобы построить плавный рабочий процесс обработки ошибок, например, в глобальном компоненте, отвечающем за отображение сообщений об ошибках:

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

Вы также можете прослушивать определенные коды состояния и категории ответов, например, если вы хотите обрабатывать ответы 4xx иначе, чем ответы 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 => {
  // 
} ) ;

Полный список кодов состояния можно найти на странице https://httpstatuses.com/.

Использование этого пакета с Laravel

Если вы используете Laravel >=5.5 в качестве бэкэнда, вам повезло. Если ваш сервер возвращает ответ 422 (обычно ошибка проверки), пакет автоматически анализирует возвращенные ошибки в повторяемый объект «ключ-значение», к которому вы можете получить доступ через data.body . Это намного проще использовать для отображения всех сообщений или ссылки на ошибку одного поля, чем исходную структуру сообщения об ошибке.