Socket
Book a DemoInstallSign in
Socket

vue-axios-interceptors

Package Overview
Dependencies
Maintainers
1
Versions
8
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-axios-interceptors

Catch and handle ajax errors globally when using Axios with Vue

0.3.2
latest
Source
npmnpm
Version published
Weekly downloads
77
18.46%
Maintainers
1
Weekly downloads
 
Created
Source

Latest Version on NPM Total Downloads on NPM Software License

vue-axios-interceptors

Catch and handle ajax errors globally when using Axios with 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

The package registers a new global event bus called intercepted on the window object and emits several events on it when an ajax call leads to an error. You can easily listen for these events to build a smooth error handling workflow, for example in a global component responsible for displaying error messages:

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

You can also listen for specific status codes and response categories, for example if you'd like to handle 4xx responses differently than 5xx responses:

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

For a complete list of status codes, visit https://httpstatuses.com/.

Using this package with Laravel

If you're using Laravel >=5.5 as your backend, you're in luck. If your server returns a 422 response (typically a validation error), the package will automatically parse the returned failures into an iteratable key-value object which you can access on data.body. This is way simpler to use in order to display all messages or reference a single field error than with the original error message structure.

Keywords

vue

FAQs

Package last updated on 03 Jun 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc

U.S. Patent No. 12,346,443 & 12,314,394. Other pending.