JavaScript-快速切换tab导致请求数据不对应问题

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：

问题描述

假设有A、B、C三个tab，点击tab就请求（GET请求）对应的数据，数据存在同一个地方。如果快速切换tab，会发出多个请求，很容易出现最后一个请求完成的数据与选中的tab不对应的情况。

See the Pen 快速点击，数据错乱 by ly023 (@ly023) on CodePen.

方案1：只保存最后一次请求的数据

仅以点击的最后一个tab为准，不终止请求，只保存最后一次请求的数据。

lastRequestId保存发出请求的总次数，requestId记下当前是第几次请求，在更新数据之前检查requestId是否为最后一次请求（是否等于请求总次数lastRequestId），是就更新数据：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const lastRequestId = React.useRef(0);

const fetchData = React.useCallback((type, timeout) => {

    // 每发出一个请求，lastRequestId就加一
    lastRequestId.current++;

    // 当前请求次数
    const requestId = lastRequestId.current;

    // 模拟请求
    window.setTimeout(() => {

        // ...

        // requestId等于请求总次数，更新数据
        if (requestId === lastRequestId.current) {
            setData(responseData);
        }
    }, timeout);
}, []);