這個(gè)異步問(wèn)題你肯定遇到過(guò)，但是會(huì)解決的并不多
大家肯定遇到過(guò)這樣類似的場(chǎng)景：多個(gè) Tab 頁(yè)點(diǎn)擊切換功能，如果用戶點(diǎn)擊頻繁，很可能會(huì)出現(xiàn)當(dāng)前頁(yè)面顯示別的頁(yè)面的數(shù)據(jù)。
因?yàn)槊總€(gè)接口返回信息的時(shí)間是不同的，你不能保證先請(qǐng)求的一定最先返回?cái)?shù)據(jù)，那么就很可能會(huì)出現(xiàn)停留在頁(yè)面一卻出現(xiàn)別的頁(yè)面的數(shù)據(jù)的情況。這種異步的情況術(shù)語(yǔ)稱之為異步競(jìng)態(tài)。
這時(shí)肯定有讀者會(huì)說(shuō)了，這還不簡(jiǎn)單，我能給你輕松想出好幾個(gè)解決辦法。
節(jié)流、防抖、加 Loading!
這些做法固然能解決問(wèn)題，但是都治標(biāo)不治本，而且還影響了用戶體驗(yàn)，其實(shí)還有種辦法能夠完美解決問(wèn)題：取消請(qǐng)求。
當(dāng)然了這個(gè)取消請(qǐng)求它只是不繼續(xù)處理接口后續(xù)的響應(yīng)了，并不是真的把請(qǐng)求給取消了。畢竟請(qǐng)求如果已經(jīng)發(fā)出去的話，我們也不能順著網(wǎng)線把它追回來(lái)。
我們這邊以 axios 為例來(lái)看看怎么取消請(qǐng)求：
- 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.');
用法還是挺簡(jiǎn)單的，對(duì)于可能會(huì)出現(xiàn)異步競(jìng)態(tài)的情況下大家可以采用這個(gè)方法來(lái)解決。簡(jiǎn)單好用，還不會(huì)影響用戶體驗(yàn)，封裝下代碼就能用起來(lái)了。
