模式关闭时取消 API 调用 - React

Question

我有一个条件，即我每 2.5 秒一直获取 API，直到解决所提到路径中的数据。我在模态中使用它。每 2.5 秒调用一次，直到数据被解析。但是，如果数据未解析并且我计划关闭模式，则仍在进行 API 调用。如何清除超时并在模式的关闭按钮单击时停止 API 调用？请指教。另外，如果 API 在第 5 次尝试中没有解决，我想拒绝它。

const getData = (url, path) => {
    return new Promise((resolve, reject) => {
        try {
            const loop = (async () => {
                const result = await axios.get(url);
                if (_.has(result.data, path) && result.data[path]) {
                    resolve(result.data[path]); // Resolve with the data
                    return; // Stop the loop
                }
                setTimeout(loop, 2500);
            })();
        } catch (e) {
            reject(e)
        }
    });
}

(async() => {
  const version = await getData('https://api.oceandrivers.com/static/resources.json', 'swaggerVersion');
  console.log(version);
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>

我应该在哪里放置 clearInterval？请指教。

Answer 1

您应该在模式卸载时清除超时。您可以通过在模态组件中使用 useEffect 挂钩来执行此操作，然后执行以下操作：

const timeout = setTimeout(loop, 2500)
useEffect(()=>{return clear timeout(timeout)},[]);

抱歉代码格式化，我在移动设备上。