多次请求只保持最后一次的结果
最近项目总结,如果一个输入框和一个搜索按钮,点击查询的时候,需要发起请求获取数据,因为请求是异步的,则无法获取哪一次的请求是最后一次的请求,则可以进行一下操作优化:思路一:请求外部存在一个变量,记录每次请求的标记值;可以将外部的标记值传入调用请求的内部,因为函数有作用域的概念,所以暂时目前传入的数据是会一直存在于该作用域内部的,但是外部的标记值会一直变化,当是最后一次请求的时候,外部的值和内部接收
最近项目总结,如果一个输入框和一个搜索按钮,点击查询的时候,需要发起请求获取数据,因为请求是异步的,则无法获取哪一次的请求是最后一次的请求,则可以进行一下操作优化:
思路一:请求外部存在一个变量,记录每次请求的标记值;可以将外部的标记值传入调用请求的内部,因为函数有作用域的概念,所以暂时目前传入的数据是会一直存在于该作用域内部的,但是外部的标记值会一直变化,当是最后一次请求的时候,外部的值和内部接收的值是相同的,可以在此处进行数据处理。
vue代码如下:
<template>
<div class="root">
<input type="text" v-model="inputData" />
<button @click="handleSearch">搜搜</button>
<ul v-for="item in appList" :key="item.value">
<li>{{ item.label }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
inputData: "",
appList: [],
time: "",
};
},
methods: {
handleSearch() {
this.time = new Date().getTime(); //主要是这里,记录当前点击的时间戳
this.sendRequestFunc(this.time);
},
sendRequestFunc(timer) {
this.sendRequest("/microx-user/admin/org-info/all",{content:this.inputData}).then((res) => {
if (timer == this.time) {
//因为函数有作用域的概念,所以上一次点击的时候会开辟一个新的空间,保留上一次传入的数据,但是外部的数据会实时发生变化
console.log(
"有响应之后的最后一次数据处理可在这里进行",timer, this.time
);
/*
此处进行数据处理
*/
this.appList = [];
if (res.returnCode == 0) {
res.body.forEach((item) => {
var obj = {
label: item.orgName,
value: item.orgId,
};
this.appList.push(obj);
});
} else {
this.$message.error(res.returnMsg);
}
} else {
console.log("证明不是最后一次请求", timer, this.time);
}
});
},
},
};
</script>
<style scoped>
.root {
width: 1000px;
height: 1000px;
background: cyan;
}
</style>
弱网环境模拟结果展示:
值得注意的是:这里一定是上一次请求没有回来,才会进行这种处理操作!!
基于这个思路,可以使用其他的标记值,如内部自定义1,2,3,4,5,……,或者哈希值等等,但是最好还是用时间戳,因为时间戳可以看一下大小值,也算是一个好处吧
思路二:
每次请求需要携带一个标记值,假设取用的是时间戳,然后全局存储时间戳,需要协调后台对此标记值返回,此时比较全局变量和响应中的标记值,即可判断是否是最后一次的请求结果了。
大概思路就是这样,但是这种方法需要后台支持,并且返回的标记值即是请求的请求数据之一,所以大概率会被拒绝这样的需求,所以还是建议第一种方法。
完结!!!
更多推荐
所有评论(0)