track-pending-request

track-pending-request

Generate a vuex module to track async requests 'pending' status.

When you send a request to one of the registered endpoints or receive a response from one of them, this package set the proper 'pending' state value through axios interceptors.

Installation

npm i track-pending-request --save

Usage

Example

register package

import trackPendingRequestInstall from 'track-pending-request'
import axios from 'your/axios-config/path'

const store = new Vuex.Store({ 
    modules: {
      //your store modules
    }
});

//You need to install the package with your axios instance and your vuex store.
//Optionally you can define the desired store namspace it should use (default is 'trackPendingRequest').
trackPendingRequestInstall({axios, store, /* 'desiredStoreNamesapce' */});

export default store;

axios-config

import axios from 'axios'

const instance = axios.create({
    //your config
});

instance.endpoints = {
    request1: '/xxx/endpoint1'
    request2: '/yyy/endpoint2'
    request3: '/endpoint3'
};

//You need to define a 'trackPendingRequest' property on your 
//axios instance with the endpoints you would like to track
instance.trackPendingRequest = [
    instance.endpoints.request1    //we would like to track pending status only for '/xxx/endpoint1' requests
];

export default instance;

vue component

...
computed: {
    isRequest1Pending() {
        return this.$store.getters['trackPendingRequest/xxxEndpoint1']();
    },
}
...