axios入门(三): 取消请求

代码案例

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <button onclick="testGet()">发送请求</button>
        <button onclick="test()">取消请求</button>
      </div>
      <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
      <script>
        // 2. 声明全局变量
        let cancel = null;
        function testGet() {
            // 5. 检测上一次的请求是否已完成，未完成则取消
            if(cancel !== null){
                cancel()
            }
            axios({
                method: "GET",
                url: "http://localhost:3000/posts",
                // 1. 添加配置对象的属性
                cancelToken: new axios.CancelToken(function(c){
                    // 3. 将c赋值给cancel
                    cancel = c;
                })
            }).then(Response => {
                console.log(Response)
                // 4. 将cancel的值初始化
                cancel = null;
            })
        }
        // 点击取消按钮
        function test() {
            cancel();
        }
      </script>
</body>
</html>

posted @ 2022-09-08 13:29 DogLeftover 阅读(17) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· axios入门(一)

· axios请求工具类

· axios取消请求

· 六、Axios入门——取消请求

· axios怎么取消请求

阅读排行：
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 字符编码：从基础到乱码解决
· 提示词工程——AI应用必不可少的技术

axios入门(三): 取消请求

我的标签

合集 (4)

随笔分类 (1350)

阅读排行榜

推荐排行榜

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	</head>
	<body>
	<div>
	<button onclick="testGet()">发送请求</button>
	<button onclick="test()">取消请求</button>
	</div>
	<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
	<script>
	// 2. 声明全局变量
	let cancel = null;
	function testGet() {
	// 5. 检测上一次的请求是否已完成，未完成则取消
	if(cancel !== null){
	cancel()
	}
	axios({
	method: "GET",
	url: "http://localhost:3000/posts",
	// 1. 添加配置对象的属性
	cancelToken: new axios.CancelToken(function(c){
	// 3. 将c赋值给cancel
	cancel = c;
	})
	}).then(Response => {
	console.log(Response)
	// 4. 将cancel的值初始化
	cancel = null;
	})
	}
	// 点击取消按钮
	function test() {
	cancel();
	}
	</script>
	</body>
	</html>