面试官:前端如何防止接口重复提交?

前端如何防止接口重复提交?,这是一道非常高频的前端面试题,但是很多同学在面试时候都回答不完整,要么回答的不完整。老规矩,点赞收藏,点点关注支持一下,给我一分钟,理想哥教大家该怎么满分回答这个问题。

如果我是求职者,我会这么回答:

前端如何防止接口的重复提交?可以考虑以下几种方案:

第一,按钮禁用

可以在用户点击按钮后,立即对按钮增加disabled属性进行禁用,在接口请求结束后再去掉disabled属性重新启用按钮。

第二,加载loading

可以在用户点击按钮后,页面全局加载loading提示,这样可以阻止用户再次操作,也就自然可以实现接口重复提交

第三,接口锁定

我们可以在axios请求中进行统一封装,使用一个变量来记录当前正在处理的请求,在发送请求前,先检查是否正存在相同的请求,如果存在则不发送新的请求,如果不存在,再继续发送请求。

第四,唯一标识符。

前端每次请求前,都生成一个唯一标识符,比如UUID这种,并将该标识符作为请求的一部分发送到后端。后端接收到请求后,检查该标识符是否已经处理过,如果已经处理过则不再处理。

第五,防抖或节流

在用户点击提交按钮后,使用防抖或节流来延迟发送请求,确保一段时间内,用户只发送一次请求。

以上就是这个问题的回答了,大家可以下次面试时试试这么回答看看效果。

最后,欢迎关注理想哥,每天学点前端面试小技巧。

#每日一题挑战##前端##前端面试##前端面试必备宝典#
全部评论

相关推荐

一面1h  [项目] - [ ] 项目设计和技术栈的使用  - [ ] FastDFS的架构设计  - [ ] 追踪器是单点还是多点,占多少内存量  - [ ] 源文件保存在哪儿  - [ ] 文件上传下载的步骤,以及数据库的映射关系  - [ ] 怎么实现IO多路复用  - [ ] 了解的数据结构  - [ ] 红黑树的时间复杂度为什么是logn  算法- [ ] 1-n个数,有m条边描述相连的两个数,输入任意两个数,判断是否相连,各种实现及时间复杂度推算(并查集)   - [ ] 讲一讲进程和线程  - [ ] 进程间通信的方法  - [ ] 线程间通信方法,哪些和进程间一样,哪些不一样  - [ ] TCP和UDP的区别和应用场景,哪个可靠  - [ ] 讲讲三次握手和四次挥手以及为什么是这么多次  - [ ] 死锁及产生原因业内领先数据大厂 | 云和恩墨25届秋季校园招聘全面开启【关于我们】云和恩墨创立于2011年,是业界领先的“智能的数据技术提供商”公司总部位于北京,在国内外35个地区设有本地办公室并开展业务。【招聘岗位】技术类(研发、测试、技术顾问、后端开发、软件产品BD等)、商务管培生、销售管培生、财务管培生、人力管培生、投标专员。最快5个工作日完成笔面试及offer发放全流程,每人可投地三个岗位。【薪酬福利】965不加班、竞争力薪酬(20w+)、数据大厂全面培养、多方位福利、年度晋升(每年都有晋级的机会,比例高达80%以上,远超于同行业公司晋级比例)等【工作岗位】岗位遍布全国,支持内部城市转岗。【内推链接】https://app.mokahr.com/m/recommendation-apply/enmotech/39199?sharePageId=2972704&recommendCode=NTANAPh&codeType=1#/recommendation/page/2972704【内推码】NTANAPh(简历优先被筛选,加速流程推进)大家投递完可以在评论区打上姓名缩写+岗位,我来确认有没有内推成功喽
云和恩墨
|
校招
|
21个岗位
点赞 评论 收藏
分享
2 7 评论
分享
牛客网
牛客企业服务