有时候我们需要在输入框实时查询数据,但是由于是异步请求,有可能前面的请求结果会慢于后面的请求导致我们的请求结果错误,而且一直请求增加了网站负担,所以需要在连续输入时取消前面的请求,只请求最后一次
<template>
<div class="cancelRequest">
<input type="text" v-model="value">
</div>
</template>
<script>
export default {
data(){
return {
value:''
}
},
components:{},
props:{},
watch:{
value(){
this.query()
}
},
computed:{},
methods:{
query(){
var CancelToken=this.axios.CancelToken;
//比文档主要是多了一个判断用于取消请求
if(typeof this.cancel=='function'){
this.cancel()
}
this.axios.get('/api/user/query',{
cancelToken: new CancelToken((c)=>{
// executor 函数接收一个 cancel 函数作为参数
this.cancel = c;
})
}).then(res=>{
})
}
},
created(){},
mounted(){}
}
</script>
<style>
</style>