文章目錄
- nodemon工具的應用
- IE緩存問題
- 請求逾時與網絡異常處理
- 取消請求
- 對重複請求的處理
nodemon工具的應用
前面我們已經發現每次在對伺服器端的代碼進行了修改之後，都要重新開機一遍服務才能生效。這樣會非常的麻煩。而借助nodemon工具可以幫我們解決這一個問題。當我們修改了伺服器端的代碼之後，nodemon會自動幫我們重新開機服務端。
下載下傳：在nodejs的環境下，在指令行使用
npm install -g nodemon 在下載下傳完這個工具之後，想要使用使用它，隻需把以前的node + 空格 + 檔案名 改為 nodemon + 空格 + 檔案名 即可。
再修改完服務端的代碼之後，按下Ctrl+s在儲存的同時，即可自動重新開機。
如果提示在此系統上無法運作腳本，解決辦法：
電腦設定–>更新與安全–>開發人員選項–>找到PowerShell–>點選應用即可
IE緩存問題
問題：在一些浏覽器中(IE),由于緩存機制的存在，ajax 隻會發送的第一次請求，剩餘多次請求不會在發送給浏覽器而是直接加載緩存中的資料。
解決方式：浏覽器的緩存是根據 url 位址來記錄的，是以我們隻需要修改 url 位址即可避免緩存問題
xhr.open(“get”,“/testAJAX?t=”+Date.now());
請求逾時與網絡異常處理
你的服務端在運作的時候不可能永遠又快又準的對所有請求進行處理，請求逾時與網絡異常是服務端中經常出現的兩個問題。是以我們可以用Ajax在請求逾時與網絡異常的情況之中對使用者進行友好地提醒，是産品的體驗更好。
以下面的代碼為例：
<script>
const btn = document.getElementsByTagName('button')[0];
const result = document.querySelector('#result');
btn.addEventListener('click', function(){
const xhr = new XMLHttpRequest();
//逾時設定 2s 設定
xhr.timeout = 2000;
//逾時回調
xhr.ontimeout = function(){
alert("網絡異常, 請稍後重試!!");
}
//網絡異常回調
xhr.onerror = function(){
alert("你的網絡似乎出了一些問題!");
}
xhr.open("GET",'http://127.0.0.1:8000/delay');
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status >= 200 && xhr.status< 300){
result.innerHTML = xhr.response;
}
}
}
})
</script> 請求逾時：
我們可以通過逾時設定去界定多長時間算逾時：
//逾時設定 2s 設定
xhr.timeout = 2000; 一旦滿足了這個逾時設定，那麼這個請求就會被自動取消！
同時在逾時之後，通過逾時回調函數進行處理：
//逾時回調
xhr.ontimeout = function(){
alert("網絡異常, 請稍後重試!!");
} 如果想要模拟逾時的情況，可以在伺服器端添加定時器函數
網絡異常：
在網絡異常的時候，我們同樣也可以通過回調函數去處理：
//網絡異常回調
xhr.onerror = function(){
alert("你的網絡似乎出了一些問題!");
} 如果想要模拟網絡異常的情況，可以F12在NetWork中進行網速的延遲或者直接脫機斷網。
取消請求
前面我們涉及到了逾時取消請求的方法，而這裡是關于手動取消請求的方法。
例如：我們可以模拟一個場景，點選按鈕發送請求，點選另外一個按鈕取消請求。
<body>
<button>點選發送</button>
<button>點選取消</button>
<script>//擷取元素對象
const btns = document.querySelectorAll('button');
let x = null;
btns[0].onclick = function(){
x = new XMLHttpRequest();
x.open("GET",'http://127.0.0.1:3000/delay');
x.send();
}
// abort
btns[1].onclick = function(){
x.abort();
}</script>
</body> 取消請求 使用XMLHttpRequest對象的内置abort()方法。
因為這裡的請求可以發送多個，每個都是不一樣的對象，故這裡的XMLHttpRequest對象沒有用const去聲明，同時把它拿到外面來聲明，是為了防止取消請求事件中的作用域通路不到。
對重複請求的處理
為了緩解伺服器端的壓力，我們對于一些多次的重複請求會做出相應的處理。處理原則：永遠隻發出最新的一次請求。
<body>
<button>點選發送</button>
<script>//擷取元素對象
const btns = document.querySelectorAll('button');
let x = null;
//辨別變量
let isSending = false; // 是否正在發送AJAX請求
btns[0].onclick = function(){
//判斷辨別變量
if(isSending) x.abort();// 如果正在發送, 則取消該請求, 建立一個新的請求
x = new XMLHttpRequest();
//修改 辨別變量的值
isSending = true;
x.open("GET",'http://127.0.0.1:8000/delay');
x.send();
x.onreadystatechange = function(){
if(x.readyState === 4){
//修改辨別變量
isSending = false;
}
}
}</script>
</body> ![SpringMVC 與 Json實作資料互動[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)