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

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

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

背景

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

相似的應用場景還有：文件批量上傳等

使用技術棧：react hooks + antd4

分析

維護一個任務池，先默認發(fā)出最大并發(fā)數(shù)量的接口請求，一個蘿卜一個坑，當上一個請求結束（無論成功失?。?，則讓下一個請求進入任務隊列，之道所有請求列表都請求完成，返回這個任務池的最終結果。

部分代碼實現(xiàn)

主要業(yè)務邏輯

// ... 點擊確定，先進行前置校驗
const onSubmitHandle = (event) => {
    event.preventDefault(); // 防止觸發(fā)原生submit，導致瀏覽器頁面刷新
    validateFields((err, values) => {
        // 校驗通過
        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，重置列表等操作...
            }
        }
    })
}

維護任務池，控制并發(fā)數(shù)

const concurrentControl = (arrParam, maxNum = 10) => 
	new Promise((resolve) => {
        // 無任務數(shù)據時
        if(!arrParam.length){
            resolve([]);
            return;
        }
        const results = []; // 最終的結果集合，用于保存接口返回的信息
        let index = 0; // 用于記錄下一個接口下標
        let count = 0; // 用于記錄發(fā)送了多少條數(shù)據
        
        
        
        const request = async () => {
            if(index === arrParam.length) return; // 出口
            const i = index; // 當前下標（備份）
            // 組裝請求路徑與參數(shù)
            const url = arrParam[i].url;
            const param = arrParam[i].data;
            index++; // 預先記錄下一個請求的下標
            try{
                // 發(fā)送請求
                const resp = await dispatchSqlGuardSwitchProcess(url, param);
                result[i] = resp; // 記錄返回結果
            } catch( error ){
                result[i] = error;
            } finally {
                count++ ; // 當前接口完成，下一個接口調用開始
                if(count === arrParam.length){ // 全部任務池中的接口都調用完畢
                    resolve(results)
                }
                request()(); // 繼續(xù)下一個請求
            }    
        }
        
        // 初始化請求數(shù)
        const maxParallelRequests = Math.min(maxNum, arrParam.length);
        for(let i = 0; i < maxParallelRequests; i++){
            request()
        }
         
    })