背景：
对于一个搜索框，输入内容会发送一个请求，并将得到的响应显示在页面上。
对于以上场景，输入字母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))
}