首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >使用Axios在Vue.js中取消多个API调用

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

Stack Overflow用户
提问于 2017-09-29 23:18:36
回答 2查看 4.2K关注 0票数 6

我正在开发一个仪表板,上面有多个“模块”,每个模块都有自己的API调用。大多数端点都很快,但有几个端点可能需要几秒钟的时间。

我有一个日期范围的过滤选项,每次更改时,我都会重新运行数据的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它是受支持的,但我不知道如何实现它。

谢谢!

EN

回答 2

Stack Overflow用户

发布于 2017-09-30 00:55:06

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

我的意思是:

如果有过滤调用发生,不要让用户过滤。你需要使用async/await或者承诺对此也有更好的控制。

例如,如下所示的数据属性:

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

在你的超文本标记语言中,使用isFiltering禁用(添加CSS或任何你想要的)输入。这将防止用户更改过滤,并且看起来过滤正在执行。请记住添加.catch部件,以便在出现错误时将isFiltering设置为false。如果可用的话,使用.finally会更好。

if isFiltering then disable

另一种方法是使用来自Lodash的Throttle或任何其他解决方案,或者在S.O.:Simple throttle in js上建议的这种实现

这个节流选项只是为了避免连续的调用,比如当用户输入输入时。

票数 0
EN

Stack Overflow用户

发布于 2018-06-03 05:36:39

<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>

尝尝这个。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/46492000

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档