快捷導(dǎo)航

react+antd4實(shí)現(xiàn)優(yōu)化大批量接口請求

更新時(shí)間：2024年02月05日 15:27:33 作者：某哈壓力大

這篇文章主要為大家詳細(xì)介紹了如何使用react hooks + antd4實(shí)現(xiàn)大批量接口請求的前端優(yōu)化,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下

背景

接到一個(gè)需求，需要做一個(gè)運(yùn)維的功能，對公司下平臺子系統(tǒng)做一個(gè)開關(guān)界面，要求可以大批量對系統(tǒng)進(jìn)行修改。這樣大批量的修改，如果有個(gè)老哥手一抖點(diǎn)了全選，那可能同時(shí)會發(fā)送幾十上百個(gè)接口，對瀏覽器和服務(wù)器都會是一個(gè)比較大的負(fù)擔(dān)。

相似的應(yīng)用場景還有：文件批量上傳等

使用技術(shù)棧：react hooks + antd4

分析

維護(hù)一個(gè)任務(wù)池，先默認(rèn)發(fā)出最大并發(fā)數(shù)量的接口請求，一個(gè)蘿卜一個(gè)坑，當(dāng)上一個(gè)請求結(jié)束（無論成功失?。?，則讓下一個(gè)請求進(jìn)入任務(wù)隊(duì)列，之道所有請求列表都請求完成，返回這個(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)（備份）
            // 組裝請求路徑與參數(shù)
            const url = arrParam[i].url;
            const param = arrParam[i].data;
            index++; // 預(yù)先記錄下一個(gè)請求的下標(biāo)
            try{
                // 發(fā)送請求
                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è)請求
            }    
        }
        
        // 初始化請求數(shù)
        const maxParallelRequests = Math.min(maxNum, arrParam.length);
        for(let i = 0; i < maxParallelRequests; i++){
            request()
        }
         
    })