javascript - 取消异步 Axios GET 请求 - React hooks

Question

我有一个 Axios GET单击按钮时开始获取 API 的请求。此请求需要很长时间(大约一分钟)，我想取消它并在再次单击该按钮时开始一个新请求。
此外，如果请求处于待处理状态并刷新页面，我还希望能够取消该请求。
我尝试了我在 SO 上找到的所有内容，但似乎没有任何效果。我还阅读了关于取消的 Axios 文档:https://github.com/axios/axios#cancellation .
这一切都把我带到了那里:
更新的代码(见下面的编辑)

const CancelToken = axios.CancelToken;
let cancel;

function App() {
    useEffect(() => {
        async function getPairs() {
            try {
                if (cancel) {
                    cancel();
                }

                const res = await axios.get('http://localhost:3000/binance/pairs?timeframe='+timeframe+'&strat='+strat, {
                    cancelToken: new CancelToken(function executor(c) {
                    cancel = c;
                    })
                });

                if (res.status === 200 || res.data.status === 'success') {
                    setPairs(res.data.pairs);
                    setReloadConfig(false);
                }
            }
            catch (err) {
                if (axios.isCancel(err)) {
                    console.log("cancelled");
                } else {
                throw err;
                }
            }
        }
    
        // reloadConfig is a React useState hook that is set to true when clicking a button 
        if (reloadConfig) {
            getPairs();
        }
    }, [reloadConfig]);
}

export default App;

请注意 reloadConfig是一个 react useState单击按钮时设置为 true 的钩子(Hook)，因此触发 useEffect hook 和 Axios 请求。
问题是，如果我多次单击该按钮，则不会取消任何请求，并且每次都会创建一个新请求。我可以看到我的终端中正在处理的所有请求。
单击触发 useEffect 的按钮时，如何取消最后一个待处理的请求并创建一个新请求?
另外，如果我刷新页面，如何取消挂起的请求？
- - - 编辑 - - -
在对代码进行了一些调整后，我发现将 cancelToken和 cancel组件函数声明之前的变量让我前进。现在， cancel不是 undefined我得到了 cancelled来自 catch 的消息堵塞 :

catch (err) {
    if (axios.isCancel(err)) {
        console.log("cancelled");
    }
}

如果我 console.log(cancel) ，它返回这个:

ƒ cancel(message) {
    if (token.reason) {
      // Cancellation has already been requested
      return;
    }

    token.reason = new Cancel(message);
    resolvePromise(token.reason);
}

所以它告诉我取消成功(如果我理解正确的话？)，但我仍然可以看到所有请求都记录在后端终端中并且仍在处理中。它出什么问题了 ？
非常感谢
----- 编辑 2 -----
首先显示的解决方案都有效。问题是我的一个误解:当我调用我的 API 以获取结果时，结果实际上是由一个库获取的，该库本身为每个结果获取一个 URI，这意味着对我的 API 的一次调用会多次调用另一个通过所述库的 API。
我可以说社区上面展示的解决方案是有效的，因为我在一个带有“普通”模拟 API 的沙箱上尝试了它们。我认为在我的情况下发生的情况是，我与 API 一起使用的库调用了 +200 个 URL，所以我猜一个调用被取消了，但另一个 199 没有。
如果有人有一个解决方案来取消一切会很好，但我认为这更多的是后端情况而不是前端情况。
感谢大家的帮助和耐心。

Answer 1

由于您依赖 useEffect 来触发您的请求，因此您可以使用 useEffect 的清理功能在执行新请求之前取消您的 API 请求。

function App() {
    useEffect(() => {
        let CancelToken = axios.CancelToken;
        let source = CancelToken.source();
        async function getPairs() {
            try {

                const res = await axios.get('http://localhost:3000/binance/pairs?timeframe='+timeframe+'&strat='+strat, {
                    cancelToken: source.token
                });

                if (res.status === 200 || res.data.status === 'success') {
                    setPairs(res.data.pairs);
                    setReloadConfig(false);
                }
            }
            catch (err) {
                if (axios.isCancel(err)) {
                    console.log("cancelled");
                } else {
                throw err;
                }
            }
        }
    
        // reloadConfig is a React useState hook that is set to true when clicking a button 
        if (reloadConfig) {
            getPairs();
        }

        return () => {
             source.cancel('Cancelled due to stale request');
        }
    }, [reloadConfig]);
}

export default App;

Note that you should define your cancel variable within useEffectotherwise it will be re-initialzed to undefined on next render if youdirectly define it within the component.