解决vue3中刷新浏览器页面的axios请求状态变为canceled

已于 2024-03-28 14:48:45 修改
阅读量953 收藏 10
点赞数 7
分类专栏： ❤️❤️--vue3核心技术栈 文章标签： 前端
于 2024-03-21 16:33:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41579104/article/details/136906482
版权

最近在开发中要加一个悲观锁的功能，具体需求是：用户1和用户2不能同时打开一个模型进行编辑，用户1优先进入模型后，要对该模型进行上锁，关闭该模型或刷新页面时要进行解锁，此时在刷新页面时出现了问题。

刷新页面时解锁的接口被浏览器cancel掉了，导致刷新了页面，系统回到了首页，编辑模型页其实已经自动退出了，但解锁接口cancel掉以后无法解锁，导致该模型一直处于占用状态，如图所示：

Chrome浏览器会取消请求的几种场景：

  1. 触发请求的DOM元素被删除了（比如img元素还没有加载完就被删除了）
  2. 做了一些不必要的数据加载（比如开始加载iframe后改变其src或重写其内容）
  3. 大量的请求指向
了解本专栏 订阅专栏 解锁全文 超级会员免费看
suoh's Blog
关注
  • 7
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
订阅专栏
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
10-17
主要介绍了解决VUE在封装了Axios后手动刷新页面拦截器无效的问题,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
解决vue axios的封装 请求状态的错误提示问题
10-17
本文将详细讲解如何解决Vue与axios结合时，关于请求状态的错误提示问题。 首先，axios提供了拦截器（interceptors）功能，允许我们在请求发送前或响应接收后执行自定义逻辑。在Vue项目中，我们可以利用这个特性来...
ajax请求导致status为canceled的原因
Start2019
07-31 1662
在使用layui的form表单提交以后，请求状态总是canceled。后来在form表单的后面添加了一行代码： return false; 就可以了。 文档：https://www.layui.com/doc/modules/form.html#onsubmit 错误： 解决方法： 总结一下： 1.在URL变更后，会对当前正在执行的ajax进求进行中止操作。中止后该请求的状态码将为cancele...
网络中断时接口status显示canceled，无法捕捉到状态进行相关操作
weixin_73318685的博客
05-17 679
客户端 在服务器响应前关闭了连接，接口status处于canceled状态。（网络中断或者网卡导致的）网络中断后，Promise没有正确 reject，因此 catch 块内的逻辑不会执行。loading状态栏无法关闭，而.then和.catch还有.finally 中都无法捕捉到接口canceled的状态，导致一直在loading状态，无法进行操作关闭弹框这一步。解决思路：尝试在网络中断的情况下手动 reject Promise，以确保 catch 块内的逻辑被执行。
Vue功能篇 - 3.封装axios请求库，支持取消请求和刷新token
R的博客
11-18 5354
Vue封装axios请求库 import axios from 'axios'; import { Message, Loading } from 'element-ui'; import router from '../router'; import _ from 'lodash'; import qs from 'qs'; const http = axios.create({ baseURL: process.env.API_HOST, //设置请求的base url timeout
解决在Vue中使用axios POST请求变成OPTIONS的问题
10-14
通过以上方法，你应该能够解决Vue中axios POST请求变成OPTIONS的问题。确保服务器正确配置CORS策略，同时在客户端适当地设置请求头，可以有效地避免OPTIONS预检请求，从而提高应用的性能。希望这些信息能帮助你理解...
Vue页面刷新记住页面状态的实现
10-15
在Vue开发中，有时我们需要实现页面刷新后仍然能记住用户在页面上的操作状态，比如搜索条件、筛选选项等。这通常涉及到页面状态的持久化。本文将详细介绍如何在Vue项目中实现这一功能。 首先，Vue提供了`...
ASP.NET Web Api 使用 EF 6，DateTime 字段如何取数据库服务器当前时间
yangshuquan的专栏
07-24 794
在做数据库设计时，为了方便进行数据追踪，通常会有几个字段是每个表都有的，比如创建时间、创建人、更新时间、更新人等，这些时间字段一般存储的是数据库服务器的时间，EF 是操作整个数据表对象，所以需要寻找方法来实现这个目的。本文分享 DB First 和 Code First 两种模式的 EF 中 DateTime 字段如何存储数据库服务器当前时间的方法。
Hutool SoapClient 调用使用@webservice 发布的webService接口，参数传递为空
FangX_u的博客
07-24 578
采用工具类Hutool SoapClient调用@webservice 发布的webService接口时，参数传递不到webService,可以借助SoapUI工具辅助查看。
Windows10+vs 2017中创建WEB API教程
Explinks的博客
07-24 981
本文将介绍如何在Windows10+vs 2017中创建web Api的教程。目前本教程当中的方法在Win10 + VS2017（MVC5）win server2016+vs2017，vs2013 vs2019当中测试通过。
TS如何处理js模块的类型？
闻人放歌的三寸青草园圃
07-24 268
【代码】TS如何处理js模块的类型？
苍穹外卖浏览器前端界面修改
程序员象漂亮的博客
07-25 224
客户原始方案是期望做一个Spring Boot + Vue的饿了么系统，但时间上太仓促，所以建议选择开源的苍穹外码目作为作业提交。客户接受了建议的方案后，期望对前端页面提出了一些个性化的定制修改。
通过不同方式在 Vue 3 中传递路由参数
点点滴滴
07-25 516
通过path参数传递：在路由路径中定义动态参数，并使用将其作为 props 传递。通过query参数传递：在路由跳转时通过query参数传递数据，并在组件中使用useRoute获取。通过props选项传递：在路由配置中使用props选项传递静态或动态参数。
前端学习1——自学习梳理
qq_63125992的博客
07-24 310
【代码】前端学习1——自学习梳理。
Vue3扁平化Tree组件的前端分页实现
felix_alone2012的博客
07-24 375
大家好，我是小卷。得益于JuanTree的扁平化设计，在数据量很大的情况下除了懒加载，使用前端分页也是一种解决渲染性能问题的可选方案。
技术实践—微前端技术应用
iOceanMind的博客
07-26 494
微前端是一种新兴的前端架构模式，是一种类似于微服务的架构，将微服务的理念应用于浏览器端。其核心理念是将一个大而单一的前端应用拆分为多个小型独立的微应用。这些微应用各自独立，可以由不同团队开发维护，部署，组合这些微应用，行成一个聚合应用。
Spring Cloud微服务项目统一封装数据响应体
洛*璃的博客
07-26 482
在微服务架构下，处理服务之间的通信和数据一致性是一个重要的挑战。为了提高开发效率、保证数据的一致性及简化前端开发，统一封装数据响应体是一种非常有效的实践。本文博主将介绍如何在 Spring Cloud 微服务项目中统一封装数据响应体，并分享一些最佳实践。
实用网站推荐
最新发布
Hinton_的博客
07-28 300
主要为与学习生活有关的网站，基本都是免费
vue手动中断一个axios请求并重新发送
04-25
可以使用axios的cancel token功能来手动中断一个请求并重新发送。具体实现方式如下： 1. 创建一个axios实例，并设置cancel token ```javascript import axios from 'axios'; const CancelToken = axios.CancelToken; const source = CancelToken.source(); const instance = axios.create({ baseURL: 'https://api.example.com/', cancelToken: source.token, }); ``` 2. 发送请求，并保存请求的cancel函数 ```javascript let cancel; instance.get('/some-api', { cancelToken: new CancelToken(function executor(c) { cancel = c; }), }) .then(response => { console.log(response.data); }) .catch(error => { if (axios.isCancel(error)) { console.log('Request canceled', error.message); } else { console.error(error); } }) ``` 3. 当需要中断请求时，调用请求的cancel函数，并重新发送请求 ```javascript cancel('Operation canceled by the user.'); instance.get('/some-api') .then(response => { console.log(response.data); }) .catch(error => { console.error(error); }) ```
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

suoh's Blog

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值