淺談中斷在異步事件中的作用

Cristic 發(fā)布于2019-08-22 18:48 / 1682人閱讀

摘要：在日常開發(fā)中，我們經(jīng)常會(huì)用到與后臺(tái)進(jìn)行數(shù)據(jù)交互，異步請(qǐng)求的情況一般分為兩種，小量數(shù)據(jù)下的一次性請(qǐng)求與大量數(shù)據(jù)下的連續(xù)或并發(fā)請(qǐng)求，這篇文章介紹的就是中斷在大量連續(xù)請(qǐng)求的情況下的作用和必要性。當(dāng)?shù)谝粋€(gè)請(qǐng)求完成后，第二個(gè)或者其他的請(qǐng)求并沒有完成。

在日常開發(fā)中，我們經(jīng)常會(huì)用到ajax與后臺(tái)進(jìn)行數(shù)據(jù)交互，異步請(qǐng)求的情況一般分為兩種，小量數(shù)據(jù)下的一次性請(qǐng)求與大量數(shù)據(jù)下的連續(xù)或并發(fā)請(qǐng)求，這篇文章介紹的就是中斷在大量連續(xù)請(qǐng)求的情況下的作用和必要性。
我們先設(shè)想一個(gè)情況，比如我要畫出一個(gè)傳感器最近一個(gè)月的監(jiān)測數(shù)據(jù)的統(tǒng)計(jì)圖，如果我采用一次性獲取所有的數(shù)據(jù)，如果傳感器的采集周期較短，那么一個(gè)月的時(shí)間長度將會(huì)有一個(gè)非常巨大的的數(shù)據(jù)量，采用一次獲取的情況將會(huì)使得用戶的等待時(shí)間非常漫長，所以我們就會(huì)在知道數(shù)據(jù)長度的情況下使用并發(fā)請(qǐng)求，在不知道數(shù)據(jù)長度的情況下使用連續(xù)的請(qǐng)求來獲取數(shù)據(jù)，然后在本地合并獲取到的數(shù)據(jù)并繪圖，這樣，用戶只需要等一個(gè)請(qǐng)求的時(shí)間就可以看到統(tǒng)計(jì)圖了。用戶看到圖后非常滿意，然后點(diǎn)擊了下一個(gè)傳感器，程序就會(huì)重新執(zhí)行上面的方法。這個(gè)過程看起來很好也沒什么錯(cuò)對(duì)吧？其實(shí)，這樣處理有可能會(huì)造成比較嚴(yán)重的錯(cuò)誤，那就是數(shù)據(jù)污染。

這是我們整個(gè)數(shù)據(jù)處理的流程圖，有一點(diǎn)需要注意的是從開始發(fā)出的三條線是異步的方法，不在主進(jìn)程中。當(dāng)?shù)谝粋€(gè)請(qǐng)求完成后，第二個(gè)或者其他的請(qǐng)求并沒有完成。這時(shí)用戶點(diǎn)擊了新的傳感器，我們又會(huì)發(fā)送一系列的請(qǐng)求到服務(wù)器。這時(shí)我們的客戶端就會(huì)收到上一個(gè)傳感器的數(shù)據(jù)和新的傳感器的數(shù)據(jù)。然而系統(tǒng)并不能判斷這次收到的數(shù)據(jù)是上一輪的還是這一輪的，都會(huì)讓這些數(shù)據(jù)走正常的方法然后展示出來，這樣，新舊數(shù)據(jù)就混在了一起。
解決這個(gè)問題的思路很簡單，那就是在發(fā)行請(qǐng)求前，關(guān)閉掉之前發(fā)送的所有請(qǐng)求，這樣，新的數(shù)據(jù)就不會(huì)被舊的數(shù)據(jù)所污染。所幸，我們使用比較廣的兩種ajax插件都有這樣的方法，下面就以我比較喜歡的axios為例。

    ///假設(shè)傳感器的數(shù)據(jù)有20頁，每頁100條
    import axios from "axios"; 
    let CancelToken = axios.CancelToken;
    let cancel;
    function loop(id){///這種請(qǐng)求一般是連續(xù)循環(huán)的請(qǐng)求
        axios.get({
            url: "/api/fakePath/",
            params: {
                id
            },
            cancelToken: new CancelToken(function executor(c) {///這個(gè)函數(shù)會(huì)傳遞一個(gè)取消的函數(shù)進(jìn)來，這里用cancel來接收
                cancel = c;
            })
        })
    }
    /// 使用方法： cancel()
    
    let source = CancelToken.source();
    function concurrence(arr){///這種是并發(fā)多個(gè)請(qǐng)求來獲取數(shù)據(jù)
        for(let i in arr){
            axios.get({
                url: "/api/fakePath/",
                params: {
                    id:i
                },
                cancelToken: source.token
            })
        }
    }
    
    
   ///使用方法，這種可以傳一個(gè)message作為提示： source.cancel("Operation canceled by the user.");

這樣在我們就創(chuàng)建了一系列的異步請(qǐng)求，并且獲取或者賦予了取消函數(shù)。loop函數(shù)因?yàn)槭沁B續(xù)的請(qǐng)求，一次只有一個(gè)，所以使用了新建CancelToken，而并發(fā)的情況下，則采用公用一個(gè)CancelToken。這樣只要在新請(qǐng)求發(fā)起前，調(diào)用對(duì)應(yīng)的CancelToken函數(shù)，就可以完美解決數(shù)據(jù)污染的問題了