重復(fù)的ajax請(qǐng)求讓人很受傷重復(fù)的ajax請(qǐng)求一波又一波的襲來(lái)，服務(wù)器正躲在角落里瑟瑟發(fā)抖，它內(nèi)心是崩潰的，這算是遭了罪了， 前端小王子為啥沒(méi)有做好限制和封鎖，真是傷不起啊，哎，不如意事常八九，能與人言無(wú)二三...... 以上場(chǎng)景是我們平時(shí)在開(kāi)發(fā)中稍微不注意就會(huì)重現(xiàn)的，也因此傷了多少服務(wù)器的心；我們作為前端開(kāi)發(fā)人員，應(yīng)該正視而且重視這個(gè)問(wèn)題。在這里，給大家提供以下幾種解決方案：

1

UI層面的攔截

當(dāng)用戶動(dòng)了動(dòng)發(fā)財(cái)?shù)男∈贮c(diǎn)擊完按鈕后，就立即禁用按鈕， 并開(kāi)啟等待動(dòng)畫(huà)，如果收到服務(wù)器的成功響應(yīng)返回后，再隱藏動(dòng)畫(huà)，一定要設(shè)置超時(shí)，時(shí)間不能太長(zhǎng)，如果過(guò)長(zhǎng)，用戶會(huì)罵街的。

1.$("#submit").prop("disabled",true); //按鈕禁用2.showLoading() //顯示動(dòng)畫(huà)3.$.ajax({ ... timeout: 4000, // 設(shè)置超時(shí)時(shí)間 complete:function(){ hideLoading() //隱藏動(dòng)畫(huà) }})

2

JS層面的封鎖

(1) 暴力點(diǎn)擊如果用戶連續(xù)暴力點(diǎn)擊按鈕，我們可以通過(guò)函數(shù)防抖來(lái)做，其實(shí)就是閉包里的setTimeout 與clearTimeout結(jié)合使用, ?連續(xù)的點(diǎn)擊會(huì)把上一次點(diǎn)擊處理函數(shù)清掉，我們的 ajax請(qǐng)求會(huì)在最后一次點(diǎn)擊后再發(fā)出去。 obtn.onclick = (function(){ var timer; return function(){ if(timer){ clearTimeout(timer) } timer= setTimeout(() => { console.log("ajax發(fā)送; 查詢結(jié)果") }, 500) } })()

(2)多tab頁(yè)快速切換

多個(gè)tab頁(yè) 快速切換也是常見(jiàn)的場(chǎng)景，如果用戶從tab1快速切換到tab2，再?gòu)膖ab2快速切換到tab1，不避免的同一個(gè)tab 要重復(fù)發(fā)起多次請(qǐng)求。還有一個(gè)問(wèn)題就是，在單頁(yè)面應(yīng)用中，切換tab后dom 結(jié)構(gòu)銷毀了，此時(shí)數(shù)據(jù)回來(lái)了，如果去操作了已經(jīng)銷毀的dom，那么控制臺(tái)會(huì)報(bào)錯(cuò)。而在vue ，react 等不需要開(kāi)發(fā)者手動(dòng)操作的dom的框架，如果我們?nèi)バ薷臓顟B(tài)，還會(huì)報(bào)出如下的警告信息，這就很難看了。

解決這個(gè)問(wèn)題的思路就是abort掉上一個(gè)請(qǐng)求。XMLHttpRequest對(duì)象有abort方法，可以直接調(diào)用。如果使用第三方的請(qǐng)求庫(kù)的話，比如axios，我們可以為我們的請(qǐng)求創(chuàng)建一個(gè)cancel token ,在每個(gè)請(qǐng)求設(shè)置一個(gè)token，在頁(yè)面切換， 或者組件銷毀前，只需要通過(guò)source.cancel取消就好了，其實(shí)原理還是通過(guò)xhr的abort方法實(shí)現(xiàn)。具體的代碼以及流程可以參考如下。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.');不同的使用場(chǎng)景，我們可以靈活的組合以上的解決方案， 不知道這樣做的話，是否能挽回服務(wù)器的心，我又想起了夕陽(yáng)下的奔跑，那是我與服務(wù)器美好邂逅，也是我們逝去的青春......

---

更多推薦

• decorator 裝飾器
• 如何講清楚閉包？
• 如何講清楚JS原型鏈?
• 如何講清楚async和await？
• 如何講清楚Promise?
• 開(kāi)發(fā)Web應(yīng)用為啥要使用TypeScript?

?苦逼的日子，有你真好看見(jiàn)這個(gè)分享了嗎，點(diǎn)它

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。