react+antd4實(shí)現(xiàn)優(yōu)化大批量接口請(qǐng)求
背景
接到一個(gè)需求,需要做一個(gè)運(yùn)維的功能,對(duì)公司下平臺(tái)子系統(tǒng)做一個(gè)開關(guān)界面,要求可以大批量對(duì)系統(tǒng)進(jìn)行修改。這樣大批量的修改,如果有個(gè)老哥手一抖點(diǎn)了全選,那可能同時(shí)會(huì)發(fā)送幾十上百個(gè)接口,對(duì)瀏覽器和服務(wù)器都會(huì)是一個(gè)比較大的負(fù)擔(dān)。
相似的應(yīng)用場(chǎng)景還有:文件批量上傳等
使用技術(shù)棧:react hooks + antd4
分析
維護(hù)一個(gè)任務(wù)池,先默認(rèn)發(fā)出最大并發(fā)數(shù)量的接口請(qǐng)求,一個(gè)蘿卜一個(gè)坑,當(dāng)上一個(gè)請(qǐng)求結(jié)束(無論成功失?。?,則讓下一個(gè)請(qǐng)求進(jìn)入任務(wù)隊(duì)列,之道所有請(qǐng)求列表都請(qǐng)求完成,返回這個(gè)任務(wù)池的最終結(jié)果。
部分代碼實(shí)現(xiàn)
主要業(yè)務(wù)邏輯
// ... 點(diǎn)擊確定,先進(jìn)行前置校驗(yàn)
const onSubmitHandle = (event) => {
event.preventDefault(); // 防止觸發(fā)原生submit,導(dǎo)致瀏覽器頁面刷新
validateFields((err, values) => {
// 校驗(yàn)通過
if(!err){
// 通過遍歷組裝參數(shù)
const arrParam = concateDynamicParams(values);
concurrentControl(arrParm, 5)
.then(res)=> {
// 獲取成功列表和失敗列表
const { sucSystem, faildSystem } = getSucAndFailedResult(res);
const content = (
<p>
{'修改成功的系統(tǒng):'}
<br />
{`${sucSystem}`}
<br />
{'修改失敗的系統(tǒng):'}
<br />
{`${faildSystem}`}
</p>
);
Modal.info({
title: "提示",
content,
oKText: "確定",
})
// 取消loading,重置列表等操作...
}
}
})
}維護(hù)任務(wù)池,控制并發(fā)數(shù)
const concurrentControl = (arrParam, maxNum = 10) =>
new Promise((resolve) => {
// 無任務(wù)數(shù)據(jù)時(shí)
if(!arrParam.length){
resolve([]);
return;
}
const results = []; // 最終的結(jié)果集合,用于保存接口返回的信息
let index = 0; // 用于記錄下一個(gè)接口下標(biāo)
let count = 0; // 用于記錄發(fā)送了多少條數(shù)據(jù)
const request = async () => {
if(index === arrParam.length) return; // 出口
const i = index; // 當(dāng)前下標(biāo)(備份)
// 組裝請(qǐng)求路徑與參數(shù)
const url = arrParam[i].url;
const param = arrParam[i].data;
index++; // 預(yù)先記錄下一個(gè)請(qǐng)求的下標(biāo)
try{
// 發(fā)送請(qǐng)求
const resp = await dispatchSqlGuardSwitchProcess(url, param);
result[i] = resp; // 記錄返回結(jié)果
} catch( error ){
result[i] = error;
} finally {
count++ ; // 當(dāng)前接口完成,下一個(gè)接口調(diào)用開始
if(count === arrParam.length){ // 全部任務(wù)池中的接口都調(diào)用完畢
resolve(results)
}
request()(); // 繼續(xù)下一個(gè)請(qǐng)求
}
}
// 初始化請(qǐng)求數(shù)
const maxParallelRequests = Math.min(maxNum, arrParam.length);
for(let i = 0; i < maxParallelRequests; i++){
request()
}
})
總結(jié)
核心思想是一個(gè)蘿卜一個(gè)坑,直到所有的蘿卜都從坑里出來。(誤)
通過維護(hù)一個(gè)任務(wù)池,標(biāo)記當(dāng)前請(qǐng)求,下一個(gè)請(qǐng)求,以及當(dāng)前總共請(qǐng)求的次數(shù),便可以做到前端控制并發(fā)的需求場(chǎng)景。
參考資料:關(guān)于前端:如何實(shí)現(xiàn)并發(fā)請(qǐng)求數(shù)量控制?
到此這篇關(guān)于react+antd4實(shí)現(xiàn)優(yōu)化大批量接口請(qǐng)求的文章就介紹到這了,更多相關(guān)react優(yōu)化請(qǐng)求內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
一文教會(huì)你用redux實(shí)現(xiàn)computed計(jì)算屬性
在computed中,可以定義一些屬性,即計(jì)算屬性,下面這篇文章主要給大家介紹了關(guān)于如何利用redux實(shí)現(xiàn)computed計(jì)算屬性的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
30分鐘精通React今年最勁爆的新特性——React Hooks
這篇文章主要介紹了30分鐘精通React今年最勁爆的新特性——React Hooks,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-03-03
完美解決react-codemirror2?編輯器需點(diǎn)擊一下或者延時(shí)才顯示數(shù)據(jù)的問題
這篇文章主要介紹了react-codemirror2編輯器需點(diǎn)擊一下或者延時(shí)才顯示數(shù)據(jù)的問題,解決方法也很簡(jiǎn)單,需要手動(dòng)引入自動(dòng)刷新的插件,配置一下參數(shù)就可以了,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08

