useRequest 螞蟻中臺標準請求 Hooks

2021-10-02 20:14:58 字數 3115 閱讀 3942

上手成本偏高,需要針對不同場景選擇不同的 hooks。

所有網路請求 hooks api,底層能力不一致。比如 usepagination 不支援手動觸發、不支援輪詢等等。

useasync 能力不足,很多場景無法滿足需求,比如並行請求。

同時隨著 zeit/swr 的誕生,給了我們很多靈感,原來網路請求還可以這麼玩!swr 有非常多好用,並且我們想不到的能力。比如:

螢幕聚焦重新發起請求。

swr 能力。

這裡我簡單科普下 swr。swr 是 stale-while-revalidate 的簡稱,最主要的能力是:我們在發起網路請求時,會優先返回之前快取的資料,然後在背後發起新的網路請求,最終用新的請求結果重新觸發元件渲染。swr 特性在特定場景,對使用者非常友好。

基於上面兩點,經過內部多次討論,最終決定,我們要做乙個能力強大,覆蓋所有場景的網路請求 hooks!userequest 誕生了!它不僅囊括了當前 umi hooks 中所有和網路請求相關的 hooks 的能力,也大量借鑑了 swr 的優秀特性,香的不得了。

能力介紹

基礎網路請求

import from 『@umijs/hooks』;

function getusername()

export default () => = userequest(getusername)

if (error) return

failed to load

if (loading) return

loading…

return

username:

}複製**這是乙個最簡單的網路請求示例。在這個例子中 userequest 接收了乙個 promise 函式。在元件初始化時,會自動觸發 getusername 執行,並自動管理 data 、 loading 、 error 等資料,我們只需要根據狀態來寫相應的 ui 實現即可。

手動請求

對於「寫」請求,我們一般需要手動觸發,比如新增使用者,編輯資訊,刪除使用者等等。 userequest 只需要配置 manual = true ,即可阻止初始化執行。只有觸發 run 時才會開始執行。

import from 『@umijs/hooks』;

export default () => = userequest(changeusername, )

export default () => = userequest(getusername, )

return

username:

}複製**同時通過設定 pollingwhenhidden ,我們可以智慧型的實現在螢幕隱藏時,暫停輪詢。等螢幕恢復可見時,繼續請求,以節省資源。

當然你也可以通過 run/cancel 來手動控制定時器的開啟和關閉。

並行請求

什麼是並行請求?看了下圖應該就明白了,也就是同乙個介面,我們需要維護多個請求狀態。

示例中的並行請求有幾個特點:

刪除 n 個不同的使用者,則需要維護 n 個請求狀態。

多次刪除同乙個使用者,則只需要維護最後乙個請求。

userequest 通過設定 fetchkey ,即可對請求進行分類。相同分類的請求,只會維護乙份狀態。不同分類的請求,則會維護多份狀態。在下面的**中,我們通過 userid 將請求進行分類,同時我們可以通過 fetches[userid] 拿到當前分類的請求狀態!

export default () => = userequest(deleteuser, );

return (

}>刪除 1

}>刪除 2

}>刪除 3 );

};防抖 & 節流

通常在邊輸入邊搜尋的場景中,我們會用到防抖功能,以節省不必要的網路請求。通過 userequest ,只需要配置乙個 debounceinterval ,就可以非常簡單的實現對網路請求的節流操作。

在下面的例子中,無論呼叫了多少次 run ,只會在輸入停止後,傳送一次請求。

import from 『@umijs/hooks』;

export default () => = userequest(getemail, );

return ()}

);};

複製**節流與防抖是同樣的道理,只需要配置了 throttleinterval ,即可實現節流功能。

快取 & swr & 預載入

在前面我講了什麼是 swr,在 swr 場景下,我們會對介面資料進行快取,當下次請求該介面時,我們會先返回快取的資料,同時,在背後發起新的網路請求,待新資料拿到後,重新觸發渲染。

對於一些資料不是經常變化的介面,使用 swr 後,可以極大提高使用者使用體驗。比如下面的例子,當我們第二次訪問該文章時,直接返回了快取的資料,沒有任何的等待時間。同時,我們可以看到「最新訪問時間」在 2 秒後更新了,這意味著新的請求資料返回了。

// 用法 2

const = userequest();

// 用法 3

const = userequest((userid)=>/api/userinfo/$);

page、pagesize、total 管理

篩選條件變化,重置分頁,重新發起網路請求

userequest 通過配置 paginated = true ,即可進入分頁模式,自動幫你處理**常見邏輯,同時我們對 antd table 做了特殊支援,只用簡單幾行**,就可以實現下面圖中這樣複雜的邏輯,提效百倍。

import from 『@umijs/hooks』;

export default () => = userequest((params)=>)

}, );

const columns = ;

分頁 offset、pagesize 等管理

首次載入,載入更多狀態管理

上拉自動載入更多

元件第二次載入時,希望能記錄之前的資料,並滾動到之前的位置

userequest 通過設定 loadmore = true ,即可進入載入更多模式,配合其它引數,可以幫你處理上面所有的邏輯。

總結雖然 userequest 的功能很多,也避免不了有些你想用的特性它不支援。但不用擔心,你可以很方面的基於 userequest 去擴充套件。我們的分頁模式,及載入更多模式均是基於底層能力擴充套件實現的。你可以參考它們的**,實現自己的特有能力。

機器學習處理平台標準化的設計思想

1.問題抽象 這裡的抽象成數學問題,指的我們明確我們可以獲得什麼樣的資料,目標是乙個分類還是回歸或者是聚類的問題,如果都不是的話,如果劃歸為其中的某類問題。2.資料整合 獲取資料報括獲取原始資料以及從原始資料中經過特徵工程從原始資料中提取訓練 測試資料。機器學習比賽中原始資料都是直接提供的,但是實際...

塗鴉物聯網足跡 塗鴉雲平台標準指令集說明

前序系列文章 塗鴉物聯網足跡 塗鴉雲平台資料型別和取值約束說明 對標準指令集設計的各種名詞及注意事項作乙個簡單的說明 一 指令集說明 指令,即,是用來引導某一硬體工作的方式的 集,是集合的意思,指令集 也就是多種不同引導指令的集合。簡單點說,指令集就是一組彙編指令的集合,不同的cpu使用的指令集不同...

linux中的標準輸入 標準輸出 標準錯誤

在shell中執行命令時,每個程序都和三個開啟的檔案相聯絡,並使用檔案描述符來引用這些檔案。輸入檔案 標準輸入 0 預設是鍵盤輸入,也可以是檔案或其他命令的輸出 輸出檔案 標準輸出 1 預設是螢幕,也可以是檔案 錯誤輸出檔案 標準錯誤 2 預設是螢幕,也可以是檔案 linux系統中實際上有12個檔案...