4 years ago

Category: api, javascript

In any frontend application, invariably, one has to deal with showing the user an HTTP request is in progress. This is usually done by displaying a spinner while the request is being executed. As I got bored dealing with Axios callbacks and independent isLoading data property in my Vue.js components, I realized I needed a global solution that would prevent me from cluttering my components with those redundant data properties.

This number is increased or decreased using Axios interceptors, meaning they will be triggered whenever you do a call to axios[get|post|put|patch|delete|etc].

Whatever you want to do, you can know if there is a request pending by adding a mapState to your computed block: Then, in your layout template or wherever, you can do as follows: My Loader component simply shows a Vuetify v-progress-circular component, but this is of course entirely up to you.