位置: IT常识 - 正文

axios 取消请求:CancelToken(afn取消请求)

编辑:rootadmin
axios 取消请求:CancelToken

目录

示例代码:

步骤操作:

优化取消请求(细化错误问题):

 示例代码:

axios 请求拦截器中使用取消请求:

示例代码:

axios 批量发送请求:


推荐整理分享axios 取消请求:CancelToken(afn取消请求),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:axios请求一直是pending状态,axios取消请求发送,axios请求一直是pending状态,axios怎么中断请求,axios取消请求的原理,afn取消请求,axios取消请求的原理,axios取消请求的原理,内容如对您有帮助,希望把文章链接给更多的朋友!

注意:此方法(CancelToken),官方已经不推荐,推荐去看官网的方法

示例代码:<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能为一次请求‘打标识’axios 取消请求:CancelToken(afn取消请求)

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; }); //响应拦截器 axios.interceptors.response.use(response => { return response.data; },error => { if (isCancel(error)) { //如果进入判断,证明:是用户取消了请求 console.log('用户取消了请求,原因是', error.message); } else { console.log('失败了', error); } return new Promise(()=>{}); }); //进行简化 btn1.onclick = async () => { const result = await axios.get('http://localhost:5000/test1?delay=3000'); console.log(result); } btn2.onclick = () => { cancel("我不想要了"); } </script></body>axios 批量发送请求:

使用了axios.all( ) 的API,括号中为数组,其中写需要并发的请求。

<body> <button id="btn1">点我获取测试数据</button> <script> const btn1 = document.getElementById('btn1'); btn1.onclick = async () => { axios.all([ axios.get('http://localhost:5000/test1'), axios.get('http://localhost:5000/test2'), axios.get('http://localhost:5000/test3'), ]).then( response =>{console.log(response);}, error =>{console.log(error);} ) }; </script></body>

解释:Axios.all( ) 基于 promise.all( ),所有的都是成功的回调才会返回数据,如果有一个失败的回调,就会走错误信息。此方法会按顺序打印 并发的三个请求的数据,并且如果用了延迟请求也会是原本的顺序,这是 axios 封装好的。 

本文链接地址:https://www.jiuchutong.com/zhishi/299023.html 转载请保留说明!

上一篇:CSS实现: 水平居中 的几种方法(css水平居中和垂直居中怎么设置)

下一篇:织梦DEDECMS缓存文件时间长度的修改方法(将织梦dedecms转换到wordpress)

  • 补缴以前年度附加税如何入账
  • 应交税费是什么类
  • 企业所得税怎么做账
  • 公司中介费收入如何纳税
  • 企业所得税资产总额怎么填写
  • 加计抵减附加税怎么做账务处理
  • 融资租赁本金和租金的区别
  • 煤炭企业在建工程核算探讨
  • 成本暂估跨年度要怎么处理?
  • 通用机打发票现在还有吗
  • 技术服务开什么大类
  • 税控设备维修费怎么算
  • 增值税发票丢失可以用复印件入账么
  • 哪些开普通发票
  • 未开票收入可以填写负数吗
  • 个人所得税纳税比例
  • 母公司并购子公司需要股东会决议吗
  • 企业的筹资费用哪里找
  • 网上报税申报成功之后该怎么操作
  • 零星费用没有发票报销可以做入工资吗
  • 核定征收企业所得税应税所得率
  • 1697508750
  • 怎么授权gg修改器root权限
  • 王者荣耀怎么解除关系
  • laravel use
  • 王者荣耀中哪吒的图片
  • win10应用商店下载微信
  • mstore.exe - mstore是什么进程 有什么用
  • 应交增值税的处理
  • 工程审计的目的包括哪些
  • 财政补助收入的支付制度包括
  • 变动成本产品成本包括哪些
  • php分段
  • 企业研发费用加计扣除是什么意思
  • 设计部工资计入什么费用
  • 公司变更需要哪些资料~问华杰 财务
  • 基于Java+SpringBoot+Vue前后端分离仓库管理系统设计实现
  • vue中created和mounted
  • 发ai的英文单词
  • 我初次尝试制作的英文怎么写
  • 搭建本地http服务器
  • chronyc配置
  • 人力为主的公司名称
  • 会计利润表计算公式
  • install PostgreSQL Community Ubuntu Documentation
  • 预缴分包抵扣,所有分包都可以抵扣吗
  • 公司购买基金入什么科目
  • 摄影的服务注册是什么
  • 营改增之前的工程还能开票吗
  • 收到以前年度多交增值税账务处理怎么做账
  • mysql终端操作
  • 小规模纳税人企业所得税优惠政策最新2023
  • 职工福利按工资的实付还是应付提取
  • 房地产企业成本包括哪些
  • 所得税纳税年度
  • 持有至到期投资减值准备可以转回吗
  • 小额贷款在银行需要什么条件
  • 购入的固定资产,其入账价值包括的内容有
  • 预计产品质量保证损失计入什么费用
  • 计税价格里含税吗
  • mysql全部语法
  • sql无法用sql身份验证
  • ubuntu不支持设置属性
  • mac双系统怎么删除win系统
  • win8系统运行在哪里
  • xp系统怎么装系统教程
  • win8的计算器在哪里
  • 开关光驱是平移还是旋转
  • win7适用ie几
  • 用css滤镜实现的代码
  • 安卓版影音播放器哪个好用
  • Python中使用Queue和Condition进行线程同步的方法
  • js定时器有哪些,区别及用法
  • nodejs inspect
  • 深入理解Python特性 达恩·巴德尔
  • javascript获取复选框的值
  • 企业职工病退后一般能领多少钱
  • 北京纳税申报的具体流程
  • 税务总局广西
  • 公司注册资本印花税的税率是多少
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设