如何解決多個Tab頁點擊切換功能所導致的問題

本篇內容主要講解“如何解決多個Tab頁點擊切換功能所導致的問題”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“如何解決多個Tab頁點擊切換功能所導致的問題”吧!

大家肯定遇到過這樣類似的場景：多個 Tab 頁點擊切換功能，如果用戶點擊頻繁，很可能會出現當前頁面顯示別的頁面的數據。

因為每個接口返回信息的時間是不同的，你不能保證先請求的一定最先返回數據，那么就很可能會出現停留在頁面一卻出現別的頁面的數據的情況。這種異步的情況術語稱之為異步競態(tài)。

這時肯定有讀者會說了，這還不簡單，我能給你輕松想出好幾個解決辦法。

節(jié)流、防抖、加 Loading!

這些做法固然能解決問題，但是都治標不治本，而且還影響了用戶體驗，其實還有種辦法能夠完美解決問題：取消請求。

當然了這個取消請求它只是不繼續(xù)處理接口后續(xù)的響應了，并不是真的把請求給取消了。畢竟請求如果已經發(fā)出去的話，我們也不能順著網線把它追回來。

我們這邊以 axios 為例來看看怎么取消請求：

const CancelToken = axios.CancelToken; const 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   } });  axios.post('/user/12345', {   name: 'new name' }, {   cancelToken: source.token })  // cancel the request (the message parameter is optional) source.cancel('Operation canceled by the user.');

用法還是挺簡單的，對于可能會出現異步競態(tài)的情況下大家可以采用這個方法來解決。簡單好用，還不會影響用戶體驗，封裝下代碼就能用起來了。

到此，相信大家對“如何解決多個Tab頁點擊切換功能所導致的問題”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續(xù)學習！