浏览器刷新结束页面事件,调结束事件的接口(vue)
浏览器刷新的时候,正在进行中的事件结束掉,在刷新浏览器的时候做一些操作。
如果是调接口,就不能使用axios封装的接口,需要使用原生的fetch。
找到公共的文件App.vue
使用window.addEventListener(‘beforeunload’, function (e) {})进行浏览器关闭操作的监听。
具体代码:
window.addEventListener('beforeunload', function (e) {if (isEdit()) {e.preventDefault();e.returnValue = '您有未保存的数据,请稍后关闭';addCanvasArrData()};const studentsStore = useStudentsStore()const { getLiveId, getIsLiveStutus } = storeToRefs(studentsStore);// 是否直播状态let isLiveStutus = computed(() => {return getIsLiveStutus.value;})// 如果在直播状态,刷新浏览器,关闭直播if(isLiveStutus.value){fetch(`/request/live/log/${getLiveId.value}`,{method: 'PUT', headers: {'Content-Type': 'application/json','token': localStorage.getItem('token') ? localStorage.getItem('token') : ''},body: JSON.stringify({id: getLiveId.value,liveEndTime: new Date()})});var data = {incident: "END_LIVE_BROADCAST",identityNo: teacherStore.identityNo, // 学校班级唯一标识号liveBroadcastNo: getLiveId.value // 纸笔直播id}ws.send(JSON.stringify(data));fetch(`/request/live/log/${getLiveId.value}`,{method: 'GET', headers: {'Content-Type': 'application/json','token': localStorage.getItem('token') ? localStorage.getItem('token') : ''},});}
});