title: Axios ajax, show loading when making ajax request
body: <p>I'm currently building a vue app and Im using axios. I have a loading icon which i show before making each call and hide after.</p>
  
  <p>Im just wondering if there is a way to do this globally so I dont have to write the show/hide loading icon on every call?</p>
  
  <p>This is the code I have right now:</p>
  
  <pre><code>context.dispatch('loading', true, {root: true});
  axios.post(url,data).then((response) =&gt; {
          // some code
          context.dispatch('loading', false, {root: true});
      }).catch(function (error) {
          // some code
          context.dispatch('loading', false, {root: true});color: 'error'});
      });
  </code></pre>
  
  <p>I have seen on the axios docs there are "interceptors" but II dont know if they are at a global level or on each call.</p>
  
  <p>I also saw this post for a jquery solution, not sure how to implement it on vue though:</p>
  
  <pre><code>$('#loading-image').bind('ajaxStart', function(){
      $(this).show();
  }).bind('ajaxStop', function(){
      $(this).hide();
  });
  </code></pre>