防止重複發ajax請求是平時開發中遇到頻次較高的問題了。我通常解決方案有如下幾種，
1. UI限制。
點擊完按鈕後，就禁用按鈕， 並開啟顯示等待動畫，收到服務器的成功響應後，再隱藏動畫，最好設置超時，時間不要太長，如果太長，用戶會罵街。
(網絡圖片， 侵刪)
2. JS封鎖。
(1)如果用戶屬於暴力連續點擊按鈕，可以通過函數防抖來做，其實就是閉包裡的setTimeout 與clearTimeout, 連續的點擊會把上一次點擊處理函數清掉，我們的 ajax請求會在最後一次點擊後再發出。
(2)多個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.');
當然最終解決這個問題還是要根據場景，靈活選擇，要有自己的freestyle.
閱讀更多 千鋒H5 的文章
