<body>
<button id="btn1">点我获取测试数据</button>
<button id="btn2">取消请求</button>
<script>
const btn1 = document.getElementById('btn1');
const btn2 = document.getElementById('btn2');
const {CancelToken} = axios; //CancelToken能为一次请求‘打标识’
let cancel;
btn1.onclick = async () => {
axios({
url:'http://localhost:5000/test1?delay=3000',
cancelToken: new CancelToken((c)=>{ //c是一个函数,调用c就可以关闭本次请求
cancel = c;
})
}).then(
response =>{console.log('成功了',response);},
error =>{console.log('失败了',error);}
)
}
btn2.onclick = () =>{
cancel();
}
</script>
</body>
步骤操作:
1.首先定义一个 CancelToken 来接收 axios 中 CancelToken 主要是为了’打标识
const {CancelToken} = axios; //CancelToken能为一次请求‘打标识’
2.然后定义一个 cancel 变量
let cancel;
3.在 axios 对象中配置 cancelToken:
cancelToken: new CancelToken((c)=>{ //c是一个函数,调用c就可以关闭本次请求 cancel 的缩写
cancel = c;//赋值给外面的变量cancel 提升c的作用域?
})
4.最后绑定在某个事件发生后想取消请求时调用:
//笔记中所写的事件为点击事件 任何事件都可以
btn2.onclick = () =>{
cancel();
}
优化取消请求(细化错误问题):
说明:点击取消请求时,axios也会去失败的回调,但这不是服务器的错误导致的,是用户自身不需要本次请求,所以需要对于错误进行划分。以及如果用户反复点击,会发出多次请求,单只需要一次请求。
示例代码:
<body>
<button id="btn1">点我获取测试数据</button>
<button id="btn2">取消请求</button>
<script>
const btn1 = document.getElementById('btn1');
const btn2 = document.getElementById('btn2');
const { CancelToken, isCancel } = axios //CancelToken能为一次请求‘打标识’
let cancel;
btn1.onclick = async () => {
if(cancel) cancel();//避免多次反复请求
axios({
url: 'http://localhost:5000/test1?delay=3000',
cancelToken: new CancelToken((c) => { //c是一个函数,调用c就可以关闭本次请求
cancel = c;
})
}).then(
response => { console.log('成功了', response); },
error => {
if (isCancel(error)) {
//如果进入判断,证明:是用户取消了请求
console.log('用户取消了请求,原因是', error.message);
} else {
console.log('失败了', error);
}
}
)
}
btn2.onclick = () => {
cancel("任性,我就是不想要了");
}
</script>
</body>
解释:cancel 函数可在括号中添加说明,在进入失败的回调时进行判断是服务器端发出的,还是用户自己取消的。
axios 请求拦截器中使用取消请求:
示例代码:
<body>
<button id="btn1">点我获取测试数据</button>
<button id="btn2">取消请求</button>
<script>
const btn1 = document.getElementById('btn1');
const btn2 = document.getElementById('btn2');
const { CancelToken, isCancel } = axios //CancelToken能为一次请求‘打标识’
let cancel;
//请求拦截器
axios.interceptors.request.use(config => {
if(cancel) cancel('取消了');
config.cancelToken =new CancelToken((c)=> cancel = c);
//c是一个函数,调用c就可以关闭本次请求
return config;
## 算法
1. 冒泡排序
2. 选择排序
3. 快速排序
4. 二叉树查找: 最大值、最小值、固定值
5. 二叉树遍历
6. 二叉树的最大深度
7. 给予链表中的任一节点,把它删除掉
8. 链表倒叙
9. 如何判断一个单链表有环
![](https://img-blog.csdnimg.cn/img_convert/2e4f5a2f9cc48e4610010b45e1615bbd.webp?x-oss-process=image/format,png)
>由于篇幅限制小编,pdf文档的详解资料太全面,细节内容实在太多啦,所以只把部分知识点截图出来粗略的介绍,每个小节点里面都有更细化的内容!
. 二叉树的最大深度
7. 给予链表中的任一节点,把它删除掉
8. 链表倒叙
9. 如何判断一个单链表有环
[外链图片转存中...(img-6O7HoSof-1719209427613)]
>由于篇幅限制小编,pdf文档的详解资料太全面,细节内容实在太多啦,所以只把部分知识点截图出来粗略的介绍,每个小节点里面都有更细化的内容!