热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

vueaxios重复点击取消上一次请求封装的方法

这篇文章主要介绍了vueaxios重复点击取消上一次请求封装的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

使用场景

重复点击或者多tab标签使用一个视图等(当然也可以用加载中或者透明背景禁止请求中再次点击)

封装代码

来自于互联网

let pending = []; //声明一个数组用于存储每个请求的取消函数和axios标识
let cancelToken = axios.CancelToken;
let removePending = (config) => {
 for(let p in pending){
  if(pending[p].u === config.url + '&' + config.method) { //当当前请求在数组中存在时执行函数体
   pending[p].f(); //执行取消操作
   pending.splice(p, 1); 
  }
 }
}

// http请求拦截器
axios.interceptors.request.use(cOnfig=> {

 removePending(config); //在一个axios发送前执行一下取消操作
 config.cancelToken = new cancelToken((c)=>{
  // 这里的axios标识我是用请求地址&请求方式拼接的字符串,当然你可以选择其他的一些方式
  pending.push({ u: config.url + '&' + config.method, f: c }); 
 });
 
 return Promise.resolve(config)
}, error => {
 return Promise.reject(error)
})

// http响应拦截器
axios.interceptors.response.use(data => { 
 
 removePending(data.config); //在一个axios响应后再执行一下取消操作,把已经完成的请求从pending中移除
 
 return Promise.resolve(data)
 
}, error => {
 //加载失败
 return {'data':{}}
 // return Promise.reject(error)
})

经过多次测试发现不同请求也给我取消了,原因是没有校验请求参数,也就是说get请求可以用,修改以下代码

pending.push({ u: config.url + '&' + config.method, f: c });

修改为:

pending.push({ u: config.url + JSON.stringify(config.data) +'&' + config.method, f: c });//config.data为请求参数

上面判断也需要修改,这样get请求和post都可以用了

解决分析

(个人理解)

官方提供了axios.CancelToken来取消上一次请求方法,因此只需要判断上一次请求是否重复。声明数组变量 pending用于存储每个请求实例的axios标识(请求方式,请求参数,请求url)和该实例的取消函数;在请求拦截器中创建取消函数实例,将请求的标识(判断重复标识)及 该请求实例取消函数 push到pending数组中,创建取消上一次请求方法 removePending,该方法主要判断axios请求标识是否重复,重复则执行该实例的取消函数,并且从 pending中移除标识及该实例取消函数。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


推荐阅读
  • 本文探讨了如何通过优化 DOM 操作来提升 JavaScript 的性能,包括使用 `createElement` 函数、动画元素、理解重绘事件及处理鼠标滚动事件等关键主题。 ... [详细]
  • Hanks博士是一位著名的生物技术专家,他的儿子Hankson对数学有着浓厚的兴趣。最近,Hankson遇到了一个有趣的数学问题,涉及求解特定条件下的正整数x,而不使用传统的辗转相除法。 ... [详细]
  • 在Asp.Net MVC框架下,相较于直接在视图中返回数据,越来越多的场景倾向于采用返回Json数据的方式。 ... [详细]
  • 本文介绍了SELinux的两种主要工作模式——强制模式和宽容模式,并提供了如何在CentOS 7中正确启用和配置SELinux的方法,以及在遇到登录问题时的解决策略。 ... [详细]
  • Requests库的基本使用方法
    本文介绍了Python中Requests库的基础用法,包括如何安装、GET和POST请求的实现、如何处理Cookies和Headers,以及如何解析JSON响应。相比urllib库,Requests库提供了更为简洁高效的接口来处理HTTP请求。 ... [详细]
  • OBS Studio自动化实践:利用脚本批量生成录制场景
    本文探讨了如何利用OBS Studio进行高效录屏,并通过脚本实现场景的自动生成。适合对自动化办公感兴趣的读者。 ... [详细]
  • 近期尝试从www.hub.sciverse.com网站通过编程手段获取数据时遇到问题,起初尝试使用WebBrowser控件进行数据抓取,但发现使用GET方法翻页时,返回的HTML代码始终相同。进一步探究后了解到,该网站的数据是通过Ajax异步加载的,可通过HTTP查看详细的JSON响应。 ... [详细]
  • Jupyter Notebook多语言环境搭建指南
    本文详细介绍了如何在Linux环境下为Jupyter Notebook配置Python、Python3、R及Go四种编程语言的环境,包括必要的软件安装和配置步骤。 ... [详细]
  • 本文详细介绍了如何利用 Bootstrap Table 实现数据展示与操作,包括数据加载、表格配置及前后端交互等关键步骤。 ... [详细]
  • 本文介绍了如何正确配置Ajax POST请求,以确保前端发送的数据能够被后端正确解析。重点在于前端JSON对象的键名需要与后端实体类的字段名严格匹配。 ... [详细]
  • 小编给大家分享一下Vue3中如何提高开发效率,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获, ... [详细]
  • protobuf 使用心得:解析与编码陷阱
    本文记录了一次在广告系统中使用protobuf进行数据交换时遇到的问题及其解决过程。通过这次经历,我们将探讨protobuf的特性和编码机制,帮助开发者避免类似的陷阱。 ... [详细]
  • HTML:  将文件拖拽到此区域 ... [详细]
  • 流处理中的计数挑战与解决方案
    本文探讨了在流处理中进行计数的各种技术和挑战,并基于作者在2016年圣何塞举行的Hadoop World大会上的演讲进行了深入分析。文章不仅介绍了传统批处理和Lambda架构的局限性,还详细探讨了流处理架构的优势及其在现代大数据应用中的重要作用。 ... [详细]
  • Bootstrap Paginator 分页插件详解与应用
    本文深入探讨了Bootstrap Paginator这款流行的JavaScript分页插件,提供了详细的使用指南和示例代码,旨在帮助开发者更好地理解和利用该工具进行高效的数据展示。 ... [详细]
author-avatar
侯faulds_534
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有