用Axios取消Vue.js中的多個API調用

Question

我正在使用多個「模塊」，每個模塊都有自己的API調用。大多數終點都很快，但有一對夫婦可能需要幾秒鐘的時間。

我有日期範圍的過濾選項，每次更改時我都會重新運行數據的API調用。

問題是我不希望用戶能夠堆積API調用，如果他們在其他人加載之前不斷更改其日期範圍。

即時通訊使用單個文件的vue組件，併爲每個API調用提供一個方法，然後對這些方法進行分組和調用。

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(); 
    } 
} 

我希望能夠做的是取消watch或initStatModules方法中的所有掛起的API請求。

看着axios文檔：https://github.com/axios/axios#cancellation它被支持，但我無法讓我的腦袋圍繞如何實現它，因爲我希望。

謝謝！

Answer 1

我建議避免電話而不是取消，Axios說，它是在草案上實施，在這種情況下，它看起來像避免電話就足夠了。

我的意思是說：

如果是有一個過濾器調用發生，不要讓用戶過濾器。您需要使用async/await或Promises來更好地控制它。

例如，一個數據屬性，如：

isFiltering: false 

使用的承諾像你這樣（此處省略你的代碼，但它的其他方法同樣的想法）：

methods: { 
    getCustomers: async function() { 
     var $this = this; 
     this.isFiltering = true; 
     return axios.get(`/api/v1/reports/${$this.team.id}/stats-dashboard/customers?date=${$this.dateFilter}`).then(function(response) { 
      $this.customers = response.data; 
      $this.isFiltering = false; 
     }); 
    } 
} 

在你HTML使用isFiltering禁用（添加CSS或任何你想要的）輸入。這將阻止用戶更改過濾，並且看起來像過濾正在執行。如果出現問題，請記得添加.catch部分以將isFiltering設置爲false。使用.finally如果是可用的就更好了

if isFiltering then disable

另一種方法是使用Throttle從Lodash或任何其他解決方案，或者該實現這裏提出的SO：Simple throttle in js

爲節氣門選項就是更好地避免連續的呼叫，例如當用戶輸入一個輸入時。