重複的ajax請求讓人很受傷

重複的ajax請求讓人很受傷

重複的ajax請求一波又一波的襲來，伺服器正躲在角落裡瑟瑟發抖，它內心是崩潰的，這算是遭了罪了， 前端小王子為啥沒有做好限制和封鎖，真是傷不起啊，哎，不如意事常八九，能與人言無二三...... 以上場景是我們平時在開發中稍微不注意就會重現的，也因此傷了多少伺服器的心；我們作為前端開發人員，應該正視而且重視這個問題。在這裡，給大家提供以下幾種解決方案：

1. UI層面的攔截

當使用者動了動發財的小手點選完按鈕後，就立即 禁用按鈕， 並開啟 等待動畫，如果收到伺服器的成功響應返回後，再 隱藏動畫，一定要設定 超時，時間不能太長，如果過長，使用者會罵街的。

1.$("#submit").prop("disabled",true); //按鈕禁用

2.showLoading() //顯示動畫

3.$.ajax({

...



    timeout: 
4000,  // 設定超時時間



    complete:

function
(){



        hideLoading() //隱藏動畫



    }



})    

2. JS層面的封鎖

(1) 暴力點選

如果使用者連續暴力點選按鈕，我們可以透過 函式防抖來做，其實就是閉包裡的 setTimeout與 clearTimeout結合使用, 連續的點選會把上一次點選處理函式清掉，我們的 ajax請求會在最後一次點選後再發出去。

        obtn.
(

function(){




            
var 
timer;




            
return 
function
(){




                
if(
timer){




                   
clearTimeout(
timer)




                }




                
timer= 
setTimeout(
() => {



                    
console.log(
"ajax傳送; 查詢結果")



                }, 
500)



            }



        })()

(2)多tab頁快速切換

多個tab頁 快速切換也是常見的場景，如果使用者從tab1快速切換到tab2，再從tab2快速切換到tab1，不避免的同一個tab 要重複發起多次請求。

還有一個問題就是，在單頁面應用中，切換tab後dom 結構銷燬了，此時資料回來了，如果去操作了已經銷燬的dom，那麼控制檯會報錯。而在vue ，react 等不需要開發者手動操作的dom的框架，如果我們去修改狀態，還會報出如下的警告資訊，這就很難看了。

解決這個問題的思路就是 abort掉上一個請求。XMLHttpRequest物件有abort方法，可以直接呼叫。

如果使用第三方的請求庫的話，比如axios，我們可以為我們的請求建立一個 cancel token ,在每個請求設定一個token，在頁面切換， 或者元件銷燬前，只需要透過 source.cancel取消就好了，其實原理還是透過xhr的 abort方法實現。

具體的程式碼以及流程可以參考如下。

var CancelToken = axios.CancelToken;var source = CancelToken.source();axios.get('/user/12345', {  cancelToken: source.token}).catch(function(thrown) {  if (axios.isCancel(thrown)) {    console.log('Request canceled', thrown.message);  } else {    // handle error  }});// cancel the request (the message parameter is optional)source.cancel('Operation canceled by the user.');

不同的使用場景，我們可以靈活的組合以上的解決方案， 不知道這樣做的話，是否能挽回伺服器的心，我又想起了夕陽下的奔跑，那是我與伺服器美好邂逅，也是我們逝去的青春......