建站
咨詢
售后
建站咨詢
新聞中心
大家肯定遇到過這樣類似的場景：多個 Tab 頁點(diǎn)擊切換功能，如果用戶點(diǎn)擊頻繁，很可能會出現(xiàn)當(dāng)前頁面顯示別的頁面的數(shù)據(jù)。
成都創(chuàng)新互聯(lián)公司是一家專注網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷策劃、微信小程序開發(fā)、電子商務(wù)建設(shè)、網(wǎng)絡(luò)推廣、移動互聯(lián)開發(fā)、研究、服務(wù)為一體的技術(shù)型公司。公司成立10多年以來，已經(jīng)為上千成都花箱各業(yè)的企業(yè)公司提供互聯(lián)網(wǎng)服務(wù)。現(xiàn)在，服務(wù)的上千客戶與我們一路同行，見證我們的成長；未來，我們一起分享成功的喜悅。
因?yàn)槊總€接口返回信息的時間是不同的，你不能保證先請求的一定最先返回數(shù)據(jù)，那么就很可能會出現(xiàn)停留在頁面一卻出現(xiàn)別的頁面的數(shù)據(jù)的情況。這種異步的情況術(shù)語稱之為異步競態(tài)。
這時肯定有讀者會說了，這還不簡單，我能給你輕松想出好幾個解決辦法。
節(jié)流、防抖、加 Loading!
這些做法固然能解決問題，但是都治標(biāo)不治本，而且還影響了用戶體驗(yàn)，其實(shí)還有種辦法能夠完美解決問題：取消請求。
當(dāng)然了這個取消請求它只是不繼續(xù)處理接口后續(xù)的響應(yīng)了，并不是真的把請求給取消了。畢竟請求如果已經(jīng)發(fā)出去的話，我們也不能順著網(wǎng)線把它追回來。
我們這邊以 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.');
用法還是挺簡單的，對于可能會出現(xiàn)異步競態(tài)的情況下大家可以采用這個方法來解決。簡單好用，還不會影響用戶體驗(yàn)，封裝下代碼就能用起來了。
標(biāo)題名稱：這個異步問題你肯定遇到過，但是會解決的并不多
網(wǎng)頁網(wǎng)址：http://www.fisionsoft.com.cn/article/dhegsej.html
