前端vue3,input，远程搜索功能，向后端发送请求，async await 执行结果不对？

Question

情景：
前端vue3,input向后端发送请求，实现远程搜索
问题：
输入后返回的结果不正确，请问我这么写有问题吗？为什么先显示0033的结果而不是003的结果呢
代码：
html
<input type="text" @input="test" />
js

async function test(e) {
    let query = e.target.value
    if (query > 2) {
        console.log('输入数据：' + query)
        // 向后端发送请求
        let data = await getFilterList(query)
        console.log(data)
    }
}

显示结果

Answer 1

这种情况是由于 0033 的请求返回的比 003 的返回要早。所以会有这个问题。每次触发请求都是一个新的请求，并不是说执行完 003 的请求再执行 0033 的请求。 一般来说有这样的远程检索功能，需要看情况引入 lodash/debounce 或者 lodash/throttle。

Answer 2

003的结果晚返回了，所以就打印的晚，await只会保证同一个async内的顺序。两次输入是两次test调用，互不干扰。通常你这种场景需要做防抖/节流