间隔发出同一请求，如何取得最近一次的请求响应？

Posted 2020-11-02 liaofy

背景：

对于一个搜索框，输入内容会发送一个请求，并将得到的响应显示在页面上。

对于以上场景，输入字母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))
    }