AVt天堂网 手机版,亚洲va久久久噜噜噜久久4399,天天综合亚洲色在线精品,亚洲一级Av无码毛片久久精品

當前位置:首頁 > 科技  > 軟件

23k star超火項目,請求優化寫的一塌糊涂!我直接重構!

來源: 責編: 時間:2024-06-14 17:39:44 151觀看
導讀取消重復請求取消重復請求是一個前端項目中很常見的網絡請求優化手段,他主要是為了防止短時間內發送了多個一模一樣的請求,導致性能的消耗~23k star 的項目是怎么做的?github 上有一個很火的項目,叫做 Vben-Admin,是一個非

取消重復請求

取消重復請求是一個前端項目中很常見的網絡請求優化手段,他主要是為了防止短時間內發送了多個一模一樣的請求,導致性能的消耗~0Pm28資訊網——每日最新資訊28at.com

23k star 的項目是怎么做的?

github 上有一個很火的項目,叫做 Vben-Admin,是一個非常出色的后臺管理系統模板,但是個人覺得它的取消重復請求做的一塌糊涂(下面會說理由)!!!0Pm28資訊網——每日最新資訊28at.com

由于項目中源代碼比較多,我盡量簡化了代碼,給大家展示一下它是怎么去實現這個功能的0Pm28資訊網——每日最新資訊28at.com

我先說一下它實現這個功能的思路:0Pm28資訊網——每日最新資訊28at.com

  • 1、維護一個 Map:key 是 請求的 Method + Url,value 是這個請求的取消方法
  • 2、請求攔截器中:先清除掉 Map 中此請求 Method + Url 的存儲,也就是取消掉前面的重復請求,然后再進行本次請求
  • 3、響應攔截器:清除掉本次請求的存儲,確保不影響下一次的判斷

簡化后的代碼如下0Pm28資訊網——每日最新資訊28at.com

圖片圖片0Pm28資訊網——每日最新資訊28at.com

接著在頁面中使用0Pm28資訊網——每日最新資訊28at.com

圖片圖片0Pm28資訊網——每日最新資訊28at.com

假如我點擊了三次,那么它會將我前面的兩次取消掉,只讓第三次請求成功,從而實現取消重復請求的功能~0Pm28資訊網——每日最新資訊28at.com

圖片圖片0Pm28資訊網——每日最新資訊28at.com

圖片圖片0Pm28資訊網——每日最新資訊28at.com

但是這個方案缺陷真的很大,比如看下面的例子,我不止一個按鈕調用了,我有兩個按鈕去調用這個接口0Pm28資訊網——每日最新資訊28at.com

圖片圖片0Pm28資訊網——每日最新資訊28at.com

我先點擊了按鈕1,再點擊按鈕2,發現它把我按鈕1的請求取消掉了,只請求了按鈕2的請求,其實這是沒錯的,但是錯就錯在,它取消了按鈕1的請求,但是連著按鈕1點擊事件接下來的代碼都中斷掉了!!!!0Pm28資訊網——每日最新資訊28at.com

圖片圖片0Pm28資訊網——每日最新資訊28at.com

可以發現,控制臺沒有打印按鈕1的結果,只打印了按鈕2的結果!!!0Pm28資訊網——每日最新資訊28at.com

圖片圖片0Pm28資訊網——每日最新資訊28at.com

這顯然是不合理的,我們取消重復請求只是為了減少網絡資源、性能的消耗,但是可不想因為這個優化,而影響了我們原本的邏輯~0Pm28資訊網——每日最新資訊28at.com

其實上面的按鈕1、按鈕2,也可以類比為頁面1、頁面2,兩個頁面在短時間內發起了同一個請求,你直接去把頁面1的后續邏輯都中斷了,這不是一個好的方案!!!0Pm28資訊網——每日最新資訊28at.com

并且其實不合理的地方還有:Method + Url當做 key,確實不太合理(但是本文暫且不關注這點)0Pm28資訊網——每日最新資訊28at.com

自己思考怎么做~

想了一下,不能用上述的方案來做,缺陷太大了,自己想的方式就是不取消請求了!而是直接不發請求! 大概的思路如下:0Pm28資訊網——每日最新資訊28at.com

  • 1、維護一個Map:key 是 請求的 Method + Url,value 第一次請求的 Promise
  • 2、第一次請求時,生成一個 Promise,存儲在 Map 中
  • 3、第一次請求響應之后,修改 Promise 的狀態,并把響應數據傳給 Promise
  • 4、后續的重復請求以第一次請求的 Promise 為準,確保能復用數據,且不影響各自的后續邏輯

簡化后的代碼如下:0Pm28資訊網——每日最新資訊28at.com

圖片圖片0Pm28資訊網——每日最新資訊28at.com

結果如下,按鈕1、按鈕2各自的后續邏輯會繼續進行0Pm28資訊網——每日最新資訊28at.com

圖片圖片0Pm28資訊網——每日最新資訊28at.com

且請求只會發出一次0Pm28資訊網——每日最新資訊28at.com

圖片圖片0Pm28資訊網——每日最新資訊28at.com

第一個請求報錯了咋辦?

我這個方案是以第一個請求為主的,那么,如果第一個請求失敗了,那后續的重復請求就爺跟著失敗嗎?顯然是不對的~0Pm28資訊網——每日最新資訊28at.com

第一個請求失敗之后,我們必須讓后續的請求再重新走一次流程才對,就像是一切都沒發生過一樣!0Pm28資訊網——每日最新資訊28at.com

只需要在后續重復請求的錯誤回調中,重新執行請求即可,這樣又能重新來過了!!!0Pm28資訊網——每日最新資訊28at.com

圖片圖片0Pm28資訊網——每日最新資訊28at.com

可以看到,就算前面的失敗了,后面的照樣能自己發起請求進行自救0Pm28資訊網——每日最新資訊28at.com

圖片圖片0Pm28資訊網——每日最新資訊28at.com

圖片圖片0Pm28資訊網——每日最新資訊28at.com

有完善的空間

以上只是我根據自己思路寫出的一個粗略版本,如果大家有自己其他的顧慮,可以進行修改精進!0Pm28資訊網——每日最新資訊28at.com

本文鏈接:http://www.tebozhan.com/showinfo-26-93864-0.html23k star超火項目,請求優化寫的一塌糊涂!我直接重構!

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com

上一篇: JavaScript如何實現判斷只能輸入數字

下一篇: 從 Prometheus 到 OpenTelemetry:指標監控的演進與實踐

標簽:
  • 熱門焦點
  • Find N3入網:最高支持16+1TB

    OPPO將于近期登場的Find N3折疊屏目前已經正式入網,型號為PHN110。本次Find N3在外觀方面相比前兩代有很大的變化,不再是小號的橫向折疊屏,而是跟別的廠商一樣采用了較為常見的
  • 6月iOS設備好評榜:第一蟬聯榜首近一年

    作為安兔兔各種榜單里變化最小的那個,2023年6月的iOS好評榜和上個月相比沒有任何排名上的變化,僅僅是部分設備好評率的下降,長年累月的用戶評價和逐漸退出市場的老款機器讓這
  • 6月iOS設備性能榜:M2穩居榜首 A系列只能等一手3nm來救

    沒有新品發布,自然iOS設備性能榜的上榜設備就沒有什么更替,僅僅只有跑分變化而產生的排名變動,畢竟蘋果新品的發布節奏就是這樣的,一年下來也就幾個移動端新品,不會像安卓廠商,一
  • 學習JavaScript的10個理由...

    作者 | Simplilearn編譯 | 王瑞平當你決心學習一門語言的時候,很難選擇到底應該學習哪一門,常用的語言有Python、Java、JavaScript、C/CPP、PHP、Swift、C#、Ruby、Objective-
  • 品牌洞察丨服務本地,美團直播成效幾何?

    來源:17PR7月11日,美團App首頁推薦位出現“美團直播”的固定入口。在直播聚合頁面,外賣“神槍手”直播間、美團旅行直播間、美團買菜直播間等均已上線,同時
  • 到手價3099元起!iQOO Neo8 Pro今日首銷:安卓性能最強旗艦

    5月23日,iQOO如期舉行了新品發布會,全新的iQOO Neo8系列也正式與大家見面,包含iQOO Neo8和iQOO Neo8 Pro兩個版本,其中標準版搭載高通驍龍8+,而Pro版更
  • 機構稱Q2全球智能手機出貨量同比下滑11% 蘋果份額依舊第2

    7月20日消息,據外媒報道,研究機構的報告顯示,由于需求下滑,今年二季度全球智能手機的出貨量,同比下滑了11%,三星、蘋果等主要廠商的銷量,較去年同期均有下
  • 2022爆款:ROG魔霸6 冰川散熱系統持續護航

    喜逢開學季,各大商家開始推出自己的新產品,進行打折促銷活動。對于忠實的端游愛好者來說,能夠擁有一款夢寐以求的筆記本電腦是一件十分開心的事。但是現在的
  • “買真退假” 這種“羊毛”不能薅

    □ 法治日報 記者 王春   □ 本報通訊員 胡佳麗  2020年初,還在上大學的小東加入了一個大學生兼職QQ群。群主“七王”在群里介紹一些刷單賺
Top