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

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

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

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

取消重復請求

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

自己思考怎么做~

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

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

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

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

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

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

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

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

第一個請求報錯了咋辦?

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

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

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

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

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

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

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

有完善的空間

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

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

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

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

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

標簽:
  • 熱門焦點
  • 5月iOS設備好評榜:iPhone 14僅排第43?

    來到新的一月,安兔兔的各個榜單又重新匯總了數據,像安卓陣營的榜單都有著比較大的變動,不過iOS由于設備的更新換代并沒有那么快,所以相對來說變化并不大,特別是iOS好評榜,老款設
  • 多線程開發帶來的問題與解決方法

    使用多線程主要會帶來以下幾個問題:(一)線程安全問題  線程安全問題指的是在某一線程從開始訪問到結束訪問某一數據期間,該數據被其他的線程所修改,那么對于當前線程而言,該線程
  • 這款新興工具平臺,讓你的電腦效率翻倍

    隨著信息技術的發展,我們獲取信息的渠道越來越多,但是處理信息的效率卻成為一個瓶頸。于是各種工具應運而生,都在爭相解決我們的工作效率問題。今天我要給大家介紹一款效率
  • 2023年,我眼中的字節跳動

    此時此刻(2023年7月),字節跳動從未上市,也從未公布過任何官方的上市計劃;但是這并不妨礙它成為中國最受關注的互聯網公司之一。從2016-17年的抖音強勢崛起,到2018年的“頭騰
  • 電視息屏休眠仍有網絡上傳 愛奇藝被質疑“薅消費者羊毛”

    記者丨寧曉敏 見習生丨汗青出品丨鰲頭財經(theSankei) 前不久,愛奇藝發布了一份亮眼的一季報,不僅營收和會員營收創造歷史最佳表現,其運營利潤也連續6個月實現增長。自去年年初
  • 自律,給不了Keep自由!

    來源 | 互聯網品牌官作者 | 李大為編排 | 又耳 審核 | 谷曉輝自律能不能給用戶自由暫時不好說,但大概率不能給Keep自由。近日,全球最大的在線健身平臺Keep正式登陸港交所,努力
  • 東方甄選單飛:有些鳥注定是關不住的

    文/彭寬鴻編輯/羅卿東方甄選創始人俞敏洪帶隊的“7天甘肅行”直播活動已在近日順利收官。成立后一年多時間里,東方甄選要脫離抖音自立門戶的傳聞不絕于耳,“7
  • 三星Galaxy Z Fold/Flip 5國行售價曝光 :最低7499元/12999元起

    據官方此前宣布,三星將于7月26日也就是明天在韓國首爾舉辦Unpacked活動,屆時將帶來帶來包括Galaxy Buds 3、Galaxy Watch 6、Galaxy Tab S9、Galaxy
  • 支持aptX Lossless無損傳輸 iQOO TWS 1賽道版發布限時優惠價369元

    2023年7月4日,“無損音質,聲動人心”iQOO TWS 1正式發布,支持aptX Lossless無損傳輸,限時優惠價369元。iQOO TWS 1耳機率先支持端到端aptX Lossless無
Top