Question

我正在使用多个＆＃39;模块的仪表板上工作。每个都有自己的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 docs：https://github.com/axios/axios#cancellation它是受支持的，但我无法理解如何按照自己的意愿实现它。

谢谢！

Answer 1

我建议避免调用而不是取消，Axios说它是在草案上实现的，在这种情况下，看起来避免调用就足够了。

我的意思是：

如果发生过滤器调用，请不要让用户过滤。您需要使用async / await或Promises来更好地控制它。

例如，一个数据属性，如：

isFiltering: false

像你一样使用promises（在这里省略你的代码，但是对于其他方法也是如此）：

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

另一种方法是使用Lodash中的Throttle或任何其他解决方案，或者在S.O上建议的此实现：Simple throttle in js

节流选项最好避免连续调用，例如当用户输入输入时。

Answer 2

<template>
  <input type="date" :disabled="isDisabled" v-model="dateFilter">
</template>

<script>
export default {
  data () {
    return {
      dateFilter: null,
      modulesLoaded: 0,
      isDisabled: false
    }
  },
  watch: {
    dateFilter () {
      this.initStatModules()
    }
  },
  methods: {
    getCustomers () {
      axios.get(`/api/v1/reports/${$this.team.id}/stats-dashboard/customers?date=${$this.dateFilter}`)
        .then(response => {
          this.customers = response.data
          this.onModuleLoaded()
        })
    },
    getBookings () {
      axios.get(`/api/v1/reports/${$this.team.id}/stats-dashboard/bookings`)
        .then(response => {
          this.bookings = response.data
          this.onModuleLoaded()
        })
    },
    getTotalRevenue () {
      axios.get(`/api/v1/reports/${$this.team.id}/services-revenue?date=${$this.dateFilter}`)
        .then(response => {
          this.totalRevenue = response.data.data.totalRevenue
          this.onModuleLoaded()
        })
    },
    initStatModules () {
      this.isDisabled = true
      this.modulesLoaded = 0
      this.getCustomers()
      this.getBookings()
      this.getTotalRevenue()
    },
    onModuleLoaded () {
      this.modulesLoaded++
      if (this.modulesLoaded === 3) {
        this.isDisabled = false
      }
    }
  }
}
</script>

试试这个。

使用Axios取消Vue.js中的多个API调用

2 个答案: