多次请求的顺序问题

更新: 2025/3/22 10:52:42 字数: 0 字

多次请求只需要最后一次结果

需求分析

需求分析：

1. 搜索框做查询；
2. 第一次查询条件多，查询时间长，响应时间长；
3. 第二次查询条件少，查询时间短，响应时间短；
4. 第二次先返回，第一次后返回，会导致最新结果被覆盖。
5. 我们需要保证只返回最后一次请求的响应结果。

解决方案

• 方案一：加上时间戳 (请求标记)

  在请求参数中加上时间戳，每次请求都带上时间戳，前端记录需要的时间戳是多少，返回的时候判断时间戳是否一致，一致则返回，不一致则不返回。

  或者记录请求次数，只返回最后一次请求的响应结果。

let yanCi = false
let lastQueryId = 0

// 模拟搜索 API
function mockSearchApi(query) {
    return new Promise((resolve) => {
        const delay = yanCi ? 1000 : 6000
        if (!yanCi) yanCi = true
        setTimeout(() => {
            resolve(`搜索结果：${query}`);
        }, delay);
    });
}


function search(query) {
    const currentQueryId = ++lastQueryId; // 为每次请求生成唯一 ID

    return mockSearchApi(query)
        .then((result) => {
            if (currentQueryId === lastQueryId) {
                // 只处理最后一次请求的结果
                console.log(`接收最后一次请求结果：${result}`);
                return result;
            } else {
                console.log(`忽略非最后一次请求结果：${result}`);
                return result;
            }
        })
        .catch((error) => {
            console.error(`搜索失败：${error}`);
            throw error;
        });

}

search(1)
search(2)
// 接收最后一次请求结果：搜索结果：2
// 忽略非最后一次请求结果：搜索结果：1

• 方案二：使用队列   队列具有先进先出的特性，所以可以按照顺序依次处理请求，我们只需要拿取队列的最后一个请求结果即可。