位置: 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)

  •  谈谈博客推广的几个经验心得 (博客推广是什么)

    谈谈博客推广的几个经验心得 (博客推广是什么)

  • qq换绑手机号需要多久呢(qq换绑手机号需要多久生效)

    qq换绑手机号需要多久呢(qq换绑手机号需要多久生效)

  • 畅联通话怎么开启(畅联通话干什么用的)

    畅联通话怎么开启(畅联通话干什么用的)

  • 电脑版WPS宋体字二号字怎么设置(wps的宋体不见了)

    电脑版WPS宋体字二号字怎么设置(wps的宋体不见了)

  • 抖音艾特抖音小助手有什么用呢(抖音艾特抖音小助手会火吗)

    抖音艾特抖音小助手有什么用呢(抖音艾特抖音小助手会火吗)

  • 小米cc9和小米9se对比(小米cc9和小米cc9美图定制版手机壳通用吗)

    小米cc9和小米9se对比(小米cc9和小米cc9美图定制版手机壳通用吗)

  • miui11怎么关闭底下搜索栏(小米怎么去掉底部)

    miui11怎么关闭底下搜索栏(小米怎么去掉底部)

  • 苹果11照片怎么编辑文字(苹果11照片怎么加密)

    苹果11照片怎么编辑文字(苹果11照片怎么加密)

  • qq显示iphone在线是什么意思(qq显示iphone在线和wifi在线)

    qq显示iphone在线是什么意思(qq显示iphone在线和wifi在线)

  • gsm卡是什么卡(手机卡5g和4g有什么区别)

    gsm卡是什么卡(手机卡5g和4g有什么区别)

  • 交易待结算冻结什么意思闲鱼(交易待结算冻结三天)

    交易待结算冻结什么意思闲鱼(交易待结算冻结三天)

  • 华为mate30长度多少厘米(华为mate 30手机长多少厘米)

    华为mate30长度多少厘米(华为mate 30手机长多少厘米)

  • ndpx是什么格式(ndpx文件用什么软件打开)

    ndpx是什么格式(ndpx文件用什么软件打开)

  • 华为p40微信视频怎么美颜(华为p40微信视频聊天怎么设置美颜功能)

    华为p40微信视频怎么美颜(华为p40微信视频聊天怎么设置美颜功能)

  • 华为系列和荣耀系列的区别(华为和荣耀哪个好)

    华为系列和荣耀系列的区别(华为和荣耀哪个好)

  • 荣耀play3怎么隐藏应用(荣耀play3怎么隐藏图标)

    荣耀play3怎么隐藏应用(荣耀play3怎么隐藏图标)

  • 华为怎么禁用分屏功能(华为怎么禁用分屏模式)

    华为怎么禁用分屏功能(华为怎么禁用分屏模式)

  • 苹果拦截短信在哪里找(苹果拦截短信在哪里取消)

    苹果拦截短信在哪里找(苹果拦截短信在哪里取消)

  • iphone7怎么进dfu(iphone7怎么进入刷机模式)

    iphone7怎么进dfu(iphone7怎么进入刷机模式)

  • 手机截图后怎样编辑(手机截图后怎样修改图片文字)

    手机截图后怎样编辑(手机截图后怎样修改图片文字)

  • fmn是什么(fmn是什么牌子)

    fmn是什么(fmn是什么牌子)

  • 删除微信好友了对方还能够看见我的信息吗(删除微信好友了对方还有聊天记录吗)

    删除微信好友了对方还能够看见我的信息吗(删除微信好友了对方还有聊天记录吗)

  • 小米8和小米9买哪个(小米8好还是小米9)

    小米8和小米9买哪个(小米8好还是小米9)

  • 微信如何能设置不显示地区(微信如何能设置密码锁屏)

    微信如何能设置不显示地区(微信如何能设置密码锁屏)

  • vivonex如何开启闪充(vivonex如何开启月亮模式)

    vivonex如何开启闪充(vivonex如何开启月亮模式)

  • 电视连不上手机热点(电视连不上手机网怎么回事)

    电视连不上手机热点(电视连不上手机网怎么回事)

  • 电脑自动更新系统需要多久(电脑自动更新系统)

    电脑自动更新系统需要多久(电脑自动更新系统)

  • 所得税汇算清缴调整项目
  • 应收账款和应付账款可以抵消吗
  • 差额征税小规模免征增值税
  • 以个人名义开的发票
  • 2021年增值税专用发票红冲发票步骤
  • 企业所得税的常设机构
  • 个人股权转让协议书范本合同
  • 废弃土地的使用年限
  • 销售收入打折后怎么算
  • 报税时其他收入
  • 无形资产研究费用计入成本么
  • 总公司发工资子公司代缴个税
  • 有限合伙企业对外转让财产份额
  • 税率是3%开成5%怎么办
  • 物业公司代收水费亏损谁承担
  • 差旅费进项税能抵扣吗
  • 坏账准备需要做账吗
  • 以前年度少计收入 会计怎么处理
  • 支付教育培训费
  • 季度所得税可以不预缴吗
  • 结转应交增值税会计科目
  • 苹果中国区副总裁
  • 电脑桌面点击鼠标右键就闪退
  • win11比win10是更流畅了吗
  • 局域网内如何设置静态ip
  • 仓库折旧费
  • 超市的成功秘诀
  • 硬盘的转速有什么用
  • 支付给其他公司的工程项目管理费
  • 交际应酬性支出是什么
  • phpunicode
  • 家具折旧费是什么意思
  • 新建vue项目
  • vue插槽有什么作用
  • sklearn报错
  • 【JavaScript】【5】定时器(包含回调函数与Promise)
  • show version命令详解
  • 增值税电子发票怎么领用
  • 公司购入车辆的增值税怎么算
  • 全年多少钱就得交税
  • 教育培训学校是什么意思
  • 外购存货的账务处理
  • 建筑垃圾处置费 南通
  • 运输发票抵扣税额怎么算
  • sqlserver分布式事务
  • 出口退税相关税法文件
  • 进口代理费取费标准
  • 新成立的教育机构值得去吗
  • 营改增后租金收入交什么税
  • 主营业务收入一定要结转成本吗
  • 期初试算平衡表资产多
  • 会计档案销毁方案怎么写
  • 企业为什么要进行绩效管理?
  • 会计主体包括哪些四种
  • sql报错22018
  • 简述linux几种主流发行版本及其特点
  • centos crontab每天执行
  • win7系统开机黑屏
  • win101607怎么升级1903
  • linux删除后恢复
  • 简述linux的系统结构
  • win7 64位旗舰版电脑中如何让EditPlus软件在保存文件时不生成bak文件?
  • win8如何激活
  • js frameset
  • shell示例
  • android:excludeFromRecents="true"
  • 开发流程和步骤
  • 屏幕模式自适应模式
  • 微信假消息
  • 红杏是什么意思什么样的
  • js function函数
  • jquery中的基本选择器有哪些
  • android中的常用布局有哪几种?
  • jquery基础知识梳理
  • 福建税务局网上办税
  • 环保税征税范围噪音
  • 武汉税务证怎么网上申请
  • 网上报税失败什么原因
  • 怎样加入广东省民间文艺家协会
  • 税控盘抵税申报表怎么填
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设