Axios/Vue - Prevent axios.all() to keep executing : <p>In my application wile authenticating the user I call the fetchData function. If the user token become invalid, the application will run <code>axios.all()</code> and my interceptor will return a lot of errors.</p>

<p>How to prevent <code>axios.all()</code> of keep runing after the first error? And show only one notification to the user?</p>

<p>interceptors.js</p>

<pre><code>export default (http, store, router) =&gt; {
    http.interceptors.response.use(response =&gt; response, (error) =&gt; {
        const {response} = error;

        let message = 'Ops. Algo de errado aconteceu...';

        if([401].indexOf(response.status) &gt; -1){
            localforage.removeItem('token');

            router.push({
                name: 'login'
            });

            Vue.notify({
                group: 'panel',
                type: 'error',
                duration: 5000,
                text: response.data.message ? response.data.message : message
            });
        }

        return Promise.reject(error);
    })
}
</code></pre>

<p>auth.js</p>

<pre><code>const actions = {
    fetchData({commit, dispatch}) {
        function getChannels() {
            return http.get('channels')
        }

        function getContacts() {
            return http.get('conversations')
        }

        function getEventActions() {
            return http.get('events/actions')
        }

        // 20 more functions calls

        axios.all([
            getChannels(),
            getContacts(),
            getEventActions()
        ]).then(axios.spread(function (channels, contacts, eventActions) {
            dispatch('channels/setChannels', channels.data, {root: true})
            dispatch('contacts/setContacts', contacts.data, {root: true})
            dispatch('events/setActions', eventActions.data, {root: true})
        }))
    }
}
</code></pre>
