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

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

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

節流、防抖、加 Loading!

[[382204]]

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

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

我們這邊以 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.'); 

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