<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<title>Document</title>
</head>
<body>
<div>
<button>发送</button>
<button>取消</button>
</div>
</body>
<script>
const btn = document.querySelectorAll("button")
//可以使用变量接受，也可以不用① 与下面的①对应
// const CancelToken = axios.CancelToken; //如果使用变量定义下面出现①的位置就可以用这个变量代替
let can = null
btn[0].onclick = function () {//发送请求
if (can !== null) {//判断用户是否多次点击请求，如果上一次的请求为完成前can就不会时null
can("operation canseled by the user");//so 判断can就可以了 调用取消函数
}
axios({
data: {
name: "lisi",
age: 17,
gender: "1"
},
url: "https://api.it120.cc/conner/shop/goods/category/all",
cancelToken: new axios.CancelToken/*CancelToken①*/(function executor(c) {
can = c;//这里的c意义可能和e差不多
})
}).then(response => {
const res = JSON.parse(response.config.data)
if (res.gender === "1") {
res.gender = "男"
}
console.log(res,response)
})
}
btn[1].onclick = function () {//取消
can('Operation canceled by the user.');//取消函数
}
</script>
</html>