title: Too many requests when controlling spinner show/hide from axois interceptors
body: <p>I have an SPA written in Vue (Webpack) where I want to control the visibility of a spinner based on whether or not the app is currently handling an HTTP request or a response.</p>
  
  <p>Following some tutorials, I came up with the event bus scheme and did this:</p>
  
  <p>Created <code>eventBus.js</code>:</p>
  
  <pre><code>import Vue from 'vue';
  export const eventBus = new Vue();
  </code></pre>
  
  <p>I'm setting my axios interceptors in the <code>created()</code> hook of <code>App.vue</code>. Here's what the necessary functions look like in that component:</p>
  
  <pre><code>data() {
          return {
              showLoader: false
          };
      },  
  
      created(){
          this.setAxiosInterceptors();
          // some code removed //            
          }
      },
  
      mounted() {
          eventBus.$on('show-loader', () =&gt; {
              this.showLoader = true;
          });
  
          eventBus.$on('hide-loader', () =&gt; {
              this.showLoader = false;
          });
      },
  
  methods: {       
          setAxiosInterceptors() {
              var tokenCookieName = this.$store.getters.getCookieNames.apiToken;
              var cookieDefaultValue = this.$store.getters.getCookieDefaultValue;
  
              // token expired middleware
              this.axios.interceptors.response.use(response =&gt; {
                  var data = response.data;
  
                  if(data.info.api_token) {
                      this.$cookie.set(tokenCookieName, data.info.api_token);
                  }
  
                  if(data.status == 'error' &amp;&amp; data.info.login_failed) {
                      this.$cookie.set(tokenCookieName, cookieDefaultValue);
                      window.location = '/'; // not possible to use Vue router here
                  }
  
                  eventBus.$emit('hide-loader');
                  return response;
              }, 
                  error =&gt; {
                      eventBus.$emit('hide-loader');                    
                      console.log('Response interception failed!');
                      return Promise.reject(error);
              });
  
              // attach API token middleware
              this.axios.interceptors.request.use(config =&gt; {
                  var apiToken = this.$cookie.get(tokenCookieName);
  
                  if (!apiToken) {
                      apiToken = cookieDefaultValue;
                  }
  
                  config.headers.Authorization = 'Bearer ' + apiToken;               
                  eventBus.$emit('show-loader');               
                  return config;
              }, 
                  error =&gt; {
                      eventBus.$emit('hide-loader');
                      console.log('Request interception failed!');
                      return Promise.reject(error);                    
                  }
              );
          }
      }
  </code></pre>
  
  <p>Please ignore some of the code that isn't relevant to the problem, but I wanted to show how things are set up. Problem is, as soon as I visit my home page, the app keep making the startup GET requests over and over, until my server returns a 429 error.</p>
  
  <p>Interestingly, in my <code>eventBus.$on</code> handlers, if I just do a <code>console.log</code>, this behavior doesn't appear (of course, the spinner doesn't work as well) <em>but as soon as I change a variable or call a vuex action, this infinite reloading starts</em>. </p>
  
  <p>Any clue?</p>