java 断网处理_如何处理浏览器的断网情况？
好的斷網處理會讓人很舒適：lol的斷線重連，王者榮耀的斷線重連 可以確保游戲的繼續進行
壞的斷網處理甚至不處理會出bug：比如我手上的項目就出了個bug 業務人員表示非常苦惱
網絡問題一直是一個很值得關注的問題。
比如在慢網情況下，增加loading避免重復發請求，使用promise順序處理請求的返回結果，或者是增加一些友好的上傳進度提示等等。
那么大家有沒有想過斷網情況下該怎么做呢？比如說網絡正常->斷網->網絡正常。
其實我一直也沒想過，直到組里的測試測出一個斷網導致的bug，讓我意識到重度依賴網絡請求的前端，在斷網情況下可能會出現嚴重的bug。
因此我將在這里記錄一下自己對系統斷網情況下的處理，一方面避免bug產生，一方面保證用戶及時在應用內知道網絡已經斷開連接
概覽
用于檢測瀏覽器是否連網的navigator.onLine
斷網事件"offline"和連網事件"online"
斷網處理項目實戰
思路和效果
斷網處理組件使用
斷網處理組件詳情
發現
參考資料
概覽
為了構建一個 “斷網(offline)可用”的web應用，你需要知道應用在什么時候是斷網(offline)的。
不僅僅要知道什么時候斷網，更要知道什么時候網絡恢復正常(online)。
可以分解陳本下面兩種常見情況：
你需要知道用戶何時online，這樣你可以與服務器之間re-sync(重新同步)。
你需要知道用戶何時offline，這樣你可以將你未發出的請求過一段時間再向服務器發出。
通常可以通過online/offline事件去做這個事情。
用于檢測瀏覽器是否連網的navigator.onLine
navigator.onLine
true online
false offline
可以通過network的online選項切換為offline，打印navigator.onLine驗證。
當瀏覽器不能連接到網絡時，這個屬性會更新。規范中是這樣定義的：
The navigator.onLine attribute must return false if the user agent will not contact the network when the user follows links or when a script requests a remote page (or knows that such an attempt would fail)...
斷網事件"offline"和連網事件"online"
瀏覽器有兩個事件："online" 和 "offline".
這兩個事件會在瀏覽器在online mode和offline mode之間切換時，由頁面的
發射出去。事件會按照以下順序冒泡：document.body -> document -> window。
事件是不能去取消的(開發者在代碼上不能手動變為online或者offline，開發時使用開發者工具可以)。
注冊上下線事件的幾種方式
最最建議window+addEventListener的組合。
通過window或document或document.body和addEventListener(Chrome80僅window有效)
為document或document.body的.ononline或.onoffline屬性設置一個js函數。(注意，使用window.ononline和window.onoffline會有兼容性的問題)
也可以通過標簽注冊事件
例子
復制代碼window.addEventListener('load', function() {
var status = document.getElementById("status");
var log = document.getElementById("log");
function updateOnlineStatus(event) {
var condition = navigator.onLine ? "online" : "offline";
status.innerHTML = condition.toUpperCase();
log.insertAdjacentHTML("beforeend", "Event: " + event.type + "; Status: " + condition);
}
window.addEventListener('online', updateOnlineStatus);
window.addEventListener('offline', updateOnlineStatus);
});
復制代碼
其中insertAdjacentHTML是在標簽節點的鄰近位置插入，可以查閱：DOM進階之insertAdjacentHTML
斷網處理項目實戰
基于vue以及iView的Spin，Notice組件封裝出離線處理組件，在需要到的頁面引入即可。
思路和效果
只要做到斷網提醒+遮罩，上線提醒-遮罩即可。
監聽offline，斷網給出提醒和遮罩：網絡已斷開，請檢查網絡連接。
監聽online，連網給出提醒和遮罩：網絡已連接。
斷網處理組件使用
:offlineTitle = "斷網處理標題"
:desc="斷網處理描述"
:onlineTitle="連網提醒"
>
復制代碼
斷網處理組件詳情
{{offlineTitle}}
{{desc}}
export default {
name: 'offline-handle',
props: {
offlineTitle: {
type: String,
default: '網絡已斷開，請檢查網絡連接。',
},
onlineTitle: {
type: String,
default: '網絡已連接',
},
desc: {
type: String,
default: '',
},
duration: {
type: Number,
default: 4.5,
},
},
data() {
return {
spin: false,
};
},
mounted() {
window.addEventListener('offline', this.eventHandle);
window.addEventListener('online', this.eventHandle);
},
beforeDestroy() {
window.removeEventListener('offline', this.eventHandle);
window.removeEventListener('online', this.eventHandle);
},
methods: {
eventHandle(event) {
const type = event.type === 'offline' ? 'error' : 'success';
this.$Notice[type]({
title: type === 'error' ? this.offlineTitle : this.onlineTitle,
desc: type === 'error' ? this.desc : '',
duration: this.duration,
});
setTimeout(() => {
this.spin = event.type === 'offline';
}, 1500);
},
},
};
.offline-mark {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
z-index: 9999;
transition: position 2s;
}
/deep/.ivu-spin-fix {
text-align: left;
font-size: 20px;
h2 {
color: rgba(0, 0, 0, 0.8);
}
p {
margin-top: 20px;
color: red;
font-weight: bold;
}
}
復制代碼
發現
offline和online事件：window有效，document和document.body設置無效
手上的項目只運行在Chrome瀏覽器，只有為window設置offline和online才生效。
運行環境："Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.149 Safari/537.36
為position增加2s的transition的避免屏閃
參考資料：
期待和大家交流，共同進步，歡迎大家加入我創建的與前端開發密切相關的技術討論小組：
SegmentFault技術圈:ES新規范語法糖
前端開發QQ群：660634678
微信公眾號： 生活在瀏覽器里的我們 / excellent_developers
努力成為優秀前端工程師！
關于找一找教程網
本站文章僅代表作者觀點，不代表本站立場，所有文章非營利性免費分享。
本站提供了軟件編程、網站開發技術、服務器運維、人工智能等等IT技術文章，希望廣大程序員努力學習，讓我們用科技改變世界。
[如何處理瀏覽器的斷網情況？]http://www.zyiz.net/tech/detail-122993.html
總結
以上是生活随笔為你收集整理的java 断网处理_如何处理浏览器的断网情况？的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： AI发电厂——数据标注公司（国内数据标注
- 下一篇： aqua在HTML什么颜色,HTML颜色