前端针对多次异步请求结果的处理

前言

在前端领域，你应该有见过这两种场景：

1. 在搜索框中输入文本时，不断出现相关的提示词（联想词）
2. 通过轮询向服务端请求数据（尽管跟服务器之间通信的技术层出不穷，但不可否认轮询的使用还是非常广泛）

那么问题来了：

针对场景1， 监听keyup事件， 得到当前输入框内的内容，（不考虑之前搜索结果的缓存），在输入过程中，如何保证异步请求返回的数据是与我当前输入内容相对应的结果？

针对场景2， 异步请求返回的结果哪些是能够为我所用的呢？跟场景1 的处理方式会是相同的么？

对大量异步请求结果的处理

如上的2种场景或者其他需要频繁进行网络请求的场景，如果网络请求的速度总是能跟上交互，那么这一切的问题都将不复存在，“天下武功，唯快不破”。但再快的请求终究是异步的，谁也无法保证请求结果返回的顺序。具体的处理思路，还是要跟场景结合，本文主要围绕以上的两个场景来讨论。

搜索场景对异步请求结果的处理

由于不同长度的文本语义相差比较大，搜索推荐需要保证比较高的匹配度。所以对返回的请求只能显示与当前输入框内内容相匹配的结果。

最简单的方式就是在制定接口时，让后端将前端的查询词querytext和其结果result一同返回，前端通过判断当前输入框的内容是否等于queryText，即可决定是否对result进行后续处理。

但倘若后端因为某种客观因素不便修改，前端又该怎么做呢？我们的目的其实无非是在一个异步请求返回时也想知道发送该请求时的query，以及当前输入框内的内容嘛。一个闭包搞定：

function query(text) {
    fetch('/api').then(res => res.json())
    .then(({result}) => {
        let content = getCurrentContent();
        if (content === text) {
            //对result进一步处理
        }
    })
}

轮询场景对异步请求结果的处理

在轮询场景，大都是用来获取最新数据的，所以针对异步网络请求，只要是更晚时间发出的请求其返回结果就可用。所以通常我们会使用一个字段来记录上次更新的时间（或者随请求发送事件次数递增的数字）。

// 全局变量记录上次更新时间
let lastUpdateTime = 0;

query(text, timeStamp) {
    fetch(`/api?query=${text}`).then(res => res.json())
    .then(({result}) => {
        if (timeStamp < lastUpdateTime) {
            return
        }
        lastUpdateTime = timeStamp
        //对result进行处理
    })
}

query(text, +Date.now())

总结

也不知道说点啥了，干脆提前祝大家元旦快乐吧~