在前端開發(fā)的過程中，如果沒有注意限制和封鎖經(jīng)常會(huì)出現(xiàn)很多重復(fù)的ajax請(qǐng)求，導(dǎo)致服務(wù)器壓力很大，今天小千就來給大家提供幾個(gè)解決方案，看到就是賺到。

      1. UI層面的攔截

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

      2. JS層面的封鎖

      (1) 暴力點(diǎn)擊

      如果用戶連續(xù)暴力點(diǎn)擊按鈕，我們可以通過函數(shù)防抖來做，其實(shí)就是閉包里的setTimeout 與clearTimeout結(jié)合使用, 連續(xù)的點(diǎn)擊會(huì)把上一次點(diǎn)擊處理函數(shù)清掉，我們的 ajax請(qǐng)求會(huì)在最后一次點(diǎn)擊后再發(fā)出去。

      (2)多tab頁快速切換

      多個(gè)tab頁 快速切換也是常見的場景，如果用戶從tab1快速切換到tab2，再從tab2快速切換到tab1，不避免的同一個(gè)tab 要重復(fù)發(fā)起多次請(qǐng)求。

      還有一個(gè)問題就是，在單頁面應(yīng)用中，切換tab后dom 結(jié)構(gòu)銷毀了，此時(shí)數(shù)據(jù)回來了，如果去操作了已經(jīng)銷毀的dom，那么控制臺(tái)會(huì)報(bào)錯(cuò)。而在vue ，react 等不需要開發(fā)者手動(dòng)操作的dom的框架，如果我們?nèi)バ薷臓顟B(tài)，還會(huì)報(bào)出如下的警告信息，這就很難看了。

      解決這個(gè)問題的思路就是abort掉上一個(gè)請(qǐng)求。XMLHttpRequest對(duì)象有abort方法，可以直接調(diào)用。

      如果使用第三方的請(qǐng)求庫的話，比如axios，我們可以為我們的請(qǐng)求創(chuàng)建一個(gè)cancel token ,在每個(gè)請(qǐng)求設(shè)置一個(gè)token，在頁面切換， 或者組件銷毀前，只需要通過source.cancel取消就好了，其實(shí)原理還是通過xhr的abort方法實(shí)現(xiàn)。

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

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

      最后想學(xué)習(xí)web前端的同學(xué)，可以參考千鋒web前端培訓(xùn)班提供的web前端學(xué)習(xí)路線，該學(xué)習(xí)路線對(duì)從零基礎(chǔ)小白到web前端初級(jí)開發(fā)工程師，web前端高級(jí)開發(fā)工程師，后面的web前端大神級(jí)開發(fā)工程師都有一個(gè)明確清晰的指導(dǎo)，根據(jù)千鋒web前端培訓(xùn)機(jī)構(gòu)提供的web前端學(xué)習(xí)路線圖可以讓你對(duì)學(xué)習(xí)web前端開發(fā)需要掌握的知識(shí)有個(gè)清晰的了解，并快速入門web前端開發(fā)。想要獲取前端完整學(xué)習(xí)路線和免費(fèi)的學(xué)習(xí)資料可以添加我們的web前端技術(shù)分享交流qq群：857920838  加群找群管理領(lǐng)取即可，等你來哦~~