取消axios请求

最新推荐文章于 2024-07-07 10:10:45 发布

Float544

最新推荐文章于 2024-07-07 10:10:45 发布

阅读量122

点赞数

分类专栏：学习心得文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/qq_56392992/article/details/124903689

版权

学习心得专栏收录该内容

162 篇文章 0 订阅

订阅专栏

这段代码展示了如何通过CancelToken在JavaScript中取消axios的HTTP请求。当点击按钮时，如果存在未完成的请求，将取消上一次的请求。这在处理多个并发请求或需要及时停止不再需要的请求时非常有用。

摘要由CSDN通过智能技术生成

通过 cancelToken 实现
具体代码如下：

  <script>
        //获取按钮
        const btns = document.querySelectorAll('button');
        //2.声明全局变量
        let cancel = null;
        //发送请求
        btns[0].onclick = function () {
            // 检测上一次的请求是否已经完成
            if (cancel !== null) {
                // 取消掉上一次请求
                cancel()
            }

            axios({
                method: 'get',
                url: 'http://localhost:3000/posts',
                // 取消请求配置
                cancelToken: new axios.CancelToken(function (c) {
                    cancel = c
                })
            }).then((res) => {
                console.log(res);
                // 重置cancel
                cancel = null;
            })
        }
        btns[1].onclick = function () {
            cancel()
        }
    </script>