學習AJAX必知必會（3）~自動重啟工具nodemon、快取問題、請求超時和網路異常、取消重複請求

• 2022 年 1 月 22 日
• 筆記
• 自動重啟工具nodemon、快取問題、請求超時和網路異常、取消重複請求

1、nodemon 自動重啟工具（自動重啟基於nodejs開發的服務端應用）

■ nodemon 是一個工具，通過在檢測到目錄中的文件更改時自動重新啟動node應用程式來幫助開發node.js。

//安裝nodemon命令（全局安裝）：
npm install -g nodemon

2、解決快取問題：當請求資源不變（地址欄的url），不再發送新的請求

• 解決：通過添加一個隨機的請求參數【新請求】—通過時間撮new Date( ).getTime( ) 或者 Data.now( )添加隨機數

• 一般不需要咱手動添加，工具都有自動生成一個時間撮

xhr.open('get', '//127.0.0.1:8000/server?t=Date.now()');//通過添加一個隨機的請求參數【新請求】解決快取問題

3、Ajax請求超時和網路異常處理

（1）Ajax請求超時：

• 客戶端html處理：設置超時時間timeout和超時回調函數ontimeout

  //設置超時為2s
  xhr.timeout = 2000;
 //超時回調
  xhr.ontimeout = function () {
      alert('網路異常，請稍後再試!')
  }

• 服務端進行延時提醒：

app.get('/server', (request, response) => {
    //設置響應頭(允許跨域)
    response.setHeader('Access-Control-Allow-Origin', '*');
    //設置響應頭（允許自定義請求頭）
    response.setHeader('Access-Control-Allow-Headers', '*');
 	//設置響應體
    setTimeout(() => {
        response.send('服務端延時響應');  
    }, 3000)
});

（2）網路異常：

• 客戶端html處理：設置網路異常回調函數onerror

  xhr.onerror = function () {
      alert('你的網路似乎除了問題!');
  }

4、Ajax取消請求

■ 通過abort方法

 xhr.abort();

■ 取消重複請求（通過一個布爾的標識變數）

• isSending初始值為false, send方法執行之後，isSending值為true，獲取響應數據，判斷狀態值為4時，當前請求完成，isSending為false
• 通過判斷isSending 是否為true，為true 執行 abort方法

  //是否正在發送ajax請求
  let isSending = false;
  
  if(isSending) {
        //console.log('正在請求')
        xhr.abort();
  }

  isSending = true;
 //3、發送Ajax請求
 xhr.send();

 //4、事件綁定，處理服務端返回結果
 xhr.onreadystatechange = function () {
    //處理前判斷服務端是否返回所有結果和服務端的狀態碼是2**
    if (xhr.readyState === 4) {
         isSending = false;
    }
 }