title: Cancelling multiple API calls in Vue.js with Axios
body: <p>I'm working on a dashboard with multiple 'modules' that each have their own API calls. Most of the endpoints are snappy but there is a couple that can take a few seconds.</p>
  
  <p>I have a filtering option for date range and every time that changes I re run the API calls for the data.</p>
  
  <p>The issue is that I don't want the user to be able to stack up the API calls if they keep changing their date range quickly before the others have loaded.</p>
  
  <p>Im using a single file vue component, and have a method for each API call and then a single method that groups and calls these.</p>
  
  <pre><code>watch: {
      dateFilter: function() {
          this.initStatModules();
      }
  },
  methods: {
      getCustomers: function() {
          var $this = this;
          return axios.get(`/api/v1/reports/${$this.team.id}/stats-dashboard/customers?date=${$this.dateFilter}`).then(function(response) {
              $this.customers = response.data;
          });
      },
      getBookings: function() {
          var $this = this;
          return axios.get(`/api/v1/reports/${$this.team.id}/stats-dashboard/bookings`).then(function(response) {
              $this.bookings = response.data;
          });
      },
      getTotalRevenue: function() {
          var $this = this;
          return axios.get(`/api/v1/reports/${$this.team.id}/services-revenue?date=${$this.dateFilter}`).then(function(response) {
              $this.totalRevenue = response.data.data.totalRevenue;
          });
  
      },
      initStatModules: function() {
          this.getCustomers();
          this.getBookings();
          this.getTotalRevenue();
      }
  }
  </code></pre>
  
  <p>What I wish to be able to do is cancel all the pending API requests in the watch or initStatModules method.</p>
  
  <p>Looking at the axios docs: <a href="https://github.com/axios/axios#cancellation" rel="noreferrer">https://github.com/axios/axios#cancellation</a> it is supported, but I cannot get my head around how to implement it as I wish.</p>
  
  <p>Thanks!</p>