间隔发出同一请求,如何取得最近一次的请求响应?
背景:
对于一个搜索框,输入内容会发送一个请求,并将得到的响应显示在页面上。
对于以上场景,输入字母A
,发送第一个请求;紧接着输入B
,发送第二个请求。此刻,搜索框中显示了AB
两个字母。
对于页面显示的响应数据,有两种情况:
-
情形一:第一个请求的响应比第二个快,所以会先显示
A
的内容,再显示AB
的内容; -
情形二:第一个请求的响应比第二个慢,则会先显示
AB
的内容,接着显示A
的内容。
虽然情形二发生的概率较小,但如果出现,不仅让用户难受,更会让你难堪!
如何优化呢?
优化
对此,可以设定一个全局变量,暂且叫做request_id
,在请求方法内设置一个局部变量current_id
,每次发送请求时,使得request_id++; current_id = request_id
;处理响应时,判断current_id === request_id
,如果相等,则渲染页面。
部分代码参考:
// vue实现
methods: {
request_id: 0, // 一个全局变量
fetchData(opts){
this.request_id++
let current_id = this.request_id // 设置局部变量
return requestAPI(opts)
.then(res => {
if( current_id !== this.request_id) return // 判断局部变量是否等于全局变量
console.log(res)
})
.catch(e => console.log(e))
}