我正在开发一个仪表板,上面有多个“模块”,每个模块都有自己的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它是受支持的,但我不知道如何实现它。
谢谢!
发布于 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上建议的这种实现
这个节流选项只是为了避免连续的调用,比如当用户输入输入时。
发布于 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>
尝尝这个。
https://stackoverflow.com/questions/46492000
复制相似问题