教育网站建设的意义,珠海七中科技制作,做外国人的生意哪家网站好,模板网站外链做不起来最近在开发中要加一个悲观锁的功能#xff0c;具体需求是#xff1a;用户1和用户2不能同时打开一个模型进行编辑#xff0c;用户1优先进入模型后#xff0c;要对该模型进行上锁#xff0c;关闭该模型或刷新页面时要进行解锁#xff0c;此时在刷新页面时出现了问题。
刷新…最近在开发中要加一个悲观锁的功能具体需求是用户1和用户2不能同时打开一个模型进行编辑用户1优先进入模型后要对该模型进行上锁关闭该模型或刷新页面时要进行解锁此时在刷新页面时出现了问题。
刷新页面时解锁的接口被浏览器cancel掉了导致刷新了页面系统回到了首页编辑模型页其实已经自动退出了但解锁接口cancel掉以后无法解锁导致该模型一直处于占用状态如图所示 Chrome浏览器会取消请求的几种场景
触发请求的DOM元素被删除了比如img元素还没有加载完就被删除了做了一些不必要的数据加载比如开始加载iframe后改变其src或重写其内容大量的请求指向同一个服务器并且前面请求的网络问题表明后续的请求也走不通DNS查询错误前面的请求报400
由此可得出原因页面刷新后页面已经被销毁但放在mounted中的解锁异步请求还没完成页面就会主动把未完成的请求取消掉这时的请求是还没到服务器的。这时满足上述场景的第一条。
解决方式有 1、利用fetch Fetch API 提供了一种处理服务器交互的可靠方法并提供用于不同平台 API 的一致的接口。其中的选项包括 keepalive它可确保无论使请求进入的页面是否保持打开状态请求都会继续执行
window.addEventListener(beforeunload, {fetch(/siteAnalytics, {method: POST,body: id123,keepalive: true});
} fetch() 方法的优势在于可以更好地控制发送到服务器的内容。 fetch() 还会返回一个使用 Response 对象解析的 promise。
fetch的具体使用方法如下
fetch是传统ajax的升级版本并不是对ajax的进一步封装是原生jsfetch是新的ajax解决方案fetch会返回Promise更加简单的数据获取方式功能更强大更灵活可以看作是XMLHttpRequest的升级版。
语法结构
bodyscript typetext/javascript// POST请求传参// Fetch会返回Promise 所以我们可以使用then 拿到请求成功的结果fetch(url, {method: post, // post方法非默认 不可省略body: unamelisipwd123, // 传递数据,字符串headers: { // 设置请求头Content-Type: application/x-www-form-urlencoded}}).then(function (data) {// text()方法属于fetchAPI的一部分它返回一个Promise实例对象// 用于获取后台返回的数据 return data.text();return data.text();}).then(function (data) {// 在这个then里面我们能拿到最终的数据console.log(data)});/script
/body 2、SendBeacon() 实际上SendBeacon() 在后台使用 Fetch API因此它同样具有 64 KB 的载荷限制以及它还可以确保请求在页面卸载后继续发出。其主要优势在于简单易用。它可让您通过一行代码提交数据
window.addEventListener(unload, {navigator.sendBeacon(/siteAnalytics, getStatistics());
}
最终还是推荐fetch来解决此类情况~
