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

Cristic 發布于2019-08-22 18:48 / 1680人閱讀

摘要：在日常開發中，我們經常會用到與后臺進行數據交互，異步請求的情況一般分為兩種，小量數據下的一次性請求與大量數據下的連續或并發請求，這篇文章介紹的就是中斷在大量連續請求的情況下的作用和必要性。當第一個請求完成后，第二個或者其他的請求并沒有完成。

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

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

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

這樣在我們就創建了一系列的異步請求，并且獲取或者賦予了取消函數。loop函數因為是連續的請求，一次只有一個，所以使用了新建CancelToken，而并發的情況下，則采用公用一個CancelToken。這樣只要在新請求發起前，調用對應的CancelToken函數，就可以完美解決數據污染的問題了

云服務器 GPU云服務器在linux中的作用 stun在webrtc中的作用 i節點在linux中的作用 js中的異步操作

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96215.html

淺談JavaScript中的事件循環機制

摘要：事件循環背景是一門單線程非阻塞的腳本語言，單線程意味著，代碼在執行的任何時候，都只有一個主線程來處理所有的任務。在意識到該問題之際，新特性中的可以讓成為一門多線程語言，但實際開發中使用存在著諸多限制。這個地方被稱為執行棧。事件循環（Event Loop）背景 JavaScript是一門單線程非阻塞的腳本語言，單線程意味著，JavaScript代碼在執行的任何時候，都只有一個主線程來...

Pluser 2019-08-23 15:22 評論0 收藏0
Deep In React之淺談 React Fiber 架構(一)

摘要：在上面我們已經知道瀏覽器是一幀一幀執行的，在兩個執行幀之間，主線程通常會有一小段空閑時間，可以在這個空閑期調用空閑期回調，執行一些任務。另外由于這些堆棧是可以自己控制的，所以可以加入并發或者錯誤邊界等功能。文章首發于個人博客前言 2016 年都已經透露出來的概念，這都 9102 年了，我才開始寫 Fiber 的文章，表示慚愧呀。不過現在好的是關于 Fiber 的資料已經很豐富了，...

Jiavan 2019-08-23 18:19 評論0 收藏0
2018 淺談前端面試那些事

摘要：聲明的變量不得改變值，這意味著，一旦聲明變量，就必須立即初始化，不能留到以后賦值。雖然今年沒有換工作的打算但為了跟上時代的腳步還是忍不住整理了一份最新前端知識點知識點匯總 1.HTML HTML5新特性，語義化瀏覽器的標準模式和怪異模式xhtml和html的區別使用data-的好處meta標簽canvasHTML廢棄的標簽IE6 bug，和一些定位寫法css js放置位置和原因...

LiuRhoRamen 2019-08-30 14:11 評論0 收藏0
2018 淺談前端面試那些事

摘要：聲明的變量不得改變值，這意味著，一旦聲明變量，就必須立即初始化，不能留到以后賦值。雖然今年沒有換工作的打算但為了跟上時代的腳步還是忍不住整理了一份最新前端知識點知識點匯總 1.HTML HTML5新特性，語義化瀏覽器的標準模式和怪異模式xhtml和html的區別使用data-的好處meta標簽canvasHTML廢棄的標簽IE6 bug，和一些定位寫法css js放置位置和原因...

stormgens 2019-08-22 15:34 評論0 收藏0
2018 淺談前端面試那些事

摘要：聲明的變量不得改變值，這意味著，一旦聲明變量，就必須立即初始化，不能留到以后賦值。雖然今年沒有換工作的打算但為了跟上時代的腳步還是忍不住整理了一份最新前端知識點知識點匯總 1.HTML HTML5新特性，語義化瀏覽器的標準模式和怪異模式xhtml和html的區別使用data-的好處meta標簽canvasHTML廢棄的標簽IE6 bug，和一些定位寫法css js放置位置和原因...

Hujiawei 2019-08-01 18:43 評論0 收藏0