重復的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.onclick = (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.');不同的使用場景，我們可以靈活的組合以上的解決方案， 不知道這樣做的話，是否能挽回服務器的心，我又想起了夕陽下的奔跑，那是我與服務器美好邂逅，也是我們逝去的青春......

---

更多推薦

• decorator 裝飾器
• 如何講清楚閉包？
• 如何講清楚JS原型鏈?
• 如何講清楚async和await？
• 如何講清楚Promise?
• 開發Web應用為啥要使用TypeScript?

?苦逼的日子，有你真好看見這個分享了嗎，點它

總結

以上是生活随笔為你收集整理的ajax请求_重复的ajax请求让人很受伤的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。