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

一樂樂發表於2022-01-22
快取

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

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

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

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

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

  • 一般不需要我們手動新增，工具都有自動生成一個時間撮
xhr.open('get', 'http://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;
    }
 }

相關文章