前端批量請求場景

文章目錄

一、批量請求
- 1、Promise.allSettled
- 2、返回值穿透
二、案例
- 1、批量任務
- 2、緩存優化
- 3、另一種實現方式

一般時候前端都是簡單的查詢任務，復雜的數據獲取都是后臺處理好再返回，如果遇到接口流程化處理、數據組裝，可以參考一下。

一、批量請求

1、Promise.allSettled

假設有多個接口請求數據，可以用以下方案
由于一部分借口會報錯，用Promise.allSettled比Promise.all會更直觀；或者Promise.all加上catch

// 模擬接口請求
import React, { useEffect, useState, useRef } from "react";// 模擬接口請求
const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
const delayError = (ms) =>new Promise((resolve, reject) => setTimeout(reject, ms));const batchApiPage = () => {const [imgList, setImgList] = useState([{url: "url1",},{url: "url2",},]);const [data, setData] = useState([]);const fetchData = async () => {const result = await Promise.allSettled([delay(2000),delayError(1000).then(() => "data2"),delay(1000).then(() => "data3"),]);console.log("result", result);};// 或者Promise.all改為這樣 增加自定義catch
// const result = await Promise.all([
//    delay(2000),
//     delayError(1000).then(() => "data2").catch(() => "error2"),
//     delay(1000).then(() => "data3"),
//   ]);useEffect(() => {fetchData();}, []);return <div>213231</div>;
};export default batchApiPage;

2、返回值穿透

每一次請求的參數可能不同，想要確定請求和結果之間的關系，可以把請求參數穿透到返回值（后臺可以做，前端也可以做到）
在tabs快速切換、數據唯一性方面，有所作用（比如返回值沒有id，可以自設id）

// 隨機數
// Math.random() 肯定能取到0 增大上限再往下取整就可以擴大包含范圍
const random = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;// 模擬接口請求
const delay = (parms) =>new Promise((resolve) => {// Math.random() 肯定能取到0 增大上限再往下取整就可以擴大包含范圍const data = random(10, 15);setTimeout(() =>resolve({data,}),1000,);});
const result = await delay() // {data: 12} // 參考結果const param = {key: "value",};
const resultUnip = await delay().then((res) => {return {...res,param,};
});// 結果
//   {
//     "data": 11,
//     "param": {
//         "key": "value"
//     }
// }

二、案例

1、批量任務

假設有多張圖片，需要先調用接口上傳圖片得到url鏈接，再調用不同接口獲取每張圖對應的屬性數據，一般采取以下方案
要求一張圖一張圖進行，這樣對上傳接口壓力較小；一張圖上傳完成、數據獲取完成，才進行下一張
完整案例在下方
注意圖片上傳錯誤、獲取數據錯誤的捕獲，有可能需要展示是否錯誤的提示
由于是異步阻塞的模式，loading狀態比較好控制和獲取

import React, { useEffect, useState, useRef } from "react";// 隨機數
// Math.random() 肯定能取到0 增大上限再往下取整就可以擴大包含范圍
const random = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;// 只是延遲
const delay = (ms) =>new Promise((resolve) => setTimeout(() => resolve(""), ms));// 假設有多張圖片，需要先調用接口上傳圖片得到url鏈接，再調用不同接口獲取每張圖對應的數據，一般采取以下方案const batchApiPage = () => {const [imgList, setImgList] = useState([{url: "url1",file: "file1",},{url: "url2",file: "file2",},]);const [data, setData] = useState([]);const getUrl = async (file) => {const result = await delay(1000).then((res) => {return `https://img.url/${random(10, 20)}`;});return result;};const getImgData1 = async (url) => {await delay(1000);return `imgdata1-${url}`;};const getImgData2 = async (url) => {await delay(1000);return `imgdata2-${url}`;};const getImgData3 = async (url) => {await delay(1000);return `imgdata3-${url}`;};const dataApiConfig = [{title: "獲取圖片數據1",key: "imgdata1",api: getImgData1,},{title: "獲取圖片數據2",key: "imgdata2",api: getImgData2,},{title: "獲取圖片數據3",key: "imgdata3",api: getImgData3,},];// 獲取圖片數據const getImgData = async (imgItem) => {try {const { url, file } = imgItem;// 上傳圖片// 注意這里沒有catch 會被try catch 捕獲 succ表示是否成功const urlRes = await getUrl(file).then((res) => {return res;});// 通過圖片url去獲取不同接口數據const dataApiRes = await Promise.all(dataApiConfig.map((item) => {// 穿透參數 key,return (item.api(urlRes).then((res) => ({ key: item.key, data: res }))// 這里的catch 沒有data字段 表示接口失敗.catch(() => ({ key: item.key })));}),);// 合并數據const dataObj = dataApiRes.reduce((acc, cur) => {acc[cur.key] = cur;return acc;}, {});// 返回結果 包含圖片url，是否成功，不同接口數據return {url: urlRes,succ: true,data: dataObj,};} catch (error) {console.log("error", error);return {url: "",succ: false,data: {},};}};const fetchData = async () => {for (let i = 0; i < imgList.length; i++) {const imgItem = imgList[i];const result = await getImgData(imgItem);setData((prevData) => [...prevData, result]);}};useEffect(() => {fetchData();}, []);useEffect(() => {console.log("data", data);}, [data]);return <div>213231</div>;
};export default batchApiPage;

2、緩存優化

由于圖片可能很多達到幾十張，那么可以緩存已經請求到的數據
緩存數據，如果圖片上傳過，就不用再上傳；如果數據請求過，就不再請求，使用緩存數據。

import React, { useEffect, useState, useRef } from "react";// 隨機數
// Math.random() 肯定能取到0 增大上限再往下取整就可以擴大包含范圍
const random = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;// 只是延遲
const delay = (ms) =>new Promise((resolve) => setTimeout(() => resolve(""), ms));// 假設有多張圖片，需要先調用接口上傳圖片得到url鏈接，再調用不同接口獲取每張圖對應的數據，一般采取以下方案const batchApiPage = () => {const [imgList, setImgList] = useState([{url: "url1",file: "file1",},{url: "url2",file: "file2",},]);const [data, setData] = useState([]);const cacheData = useRef({});const getUrl = async (file) => {const result = await delay(1000).then((res) => {return `https://img.url/${random(10, 20)}`;});return result;};const getImgData1 = async (url) => {await delay(1000);return `imgdata1-${url}`;};const getImgData2 = async (url) => {await delay(1000);return `imgdata2-${url}`;};const getImgData3 = async (url) => {await delay(1000);return `imgdata3-${url}`;};const dataApiConfig = [{title: "獲取圖片數據1",key: "imgdata1",api: getImgData1,},{title: "獲取圖片數據2",key: "imgdata2",api: getImgData2,},{title: "獲取圖片數據3",key: "imgdata3",api: getImgData3,},];// 獲取圖片數據const getImgData = async (imgItem) => {try {const { url, file } = imgItem;// 上傳圖片// 注意這里沒有catch 會被try catch 捕獲 succ表示是否成功let urlRes = url;if (file) {await getUrl(file).then((res) => {// 更新 imgList 里面的urlurlRes = res;setImgList((prevImgList) =>prevImgList.map((item) => {if (item.file === file) {// 緩存圖片urlitem.url = urlRes;// 把file清空item.file = null;}return item;}),);});}// 通過圖片url去獲取不同接口數據const dataApiRes = await Promise.all(dataApiConfig.map((item) => {// 穿透參數 key 如果有緩存數據 直接返回緩存數據 直接通過節省時間const cacheDataByKey =cacheData.current[urlRes] && cacheData.current[urlRes][item.key];return cacheDataByKey? Promise.resolve({ key: item.key, data: cacheDataByKey }): item.api(urlRes).then((res) => {// 初始化緩存數據 避免undefined keycacheData.current[urlRes] = cacheData.current[urlRes] || {};cacheData.current[urlRes][item.key] = res;return { key: item.key, data: res };})// 這里的catch 沒有data字段 表示接口失敗.catch(() => ({ key: item.key }));}),);// 合并數據const dataObj = dataApiRes.reduce((acc, cur) => {acc[cur.key] = cur;return acc;}, {});// 返回結果 包含圖片url，是否成功，不同接口數據return {url: urlRes,succ: true,data: dataObj,};} catch (error) {console.log("error", error);return {url: "",succ: false,data: {},};}};const fetchData = async () => {// 清空setData([]);for (let i = 0; i < imgList.length; i++) {const imgItem = imgList[i];const result = await getImgData(imgItem);setData((prevData) => [...prevData, result]);}};useEffect(() => {console.log("data", data);}, [data]);return (<div onClick={fetchData} style={{ cursor: "pointer" }}>21312323123</div>);
};export default batchApiPage;

3、另一種實現方式

同樣是獲取圖片數據，這里通過依次檢查dataList每一條數據，發現未上傳，就去上傳圖片，然后再調用圖片數據接口；
如果上傳過就直接調用圖片數據接口；
一直按照順序查找未完成的圖片，之前是loading狀態，最后complete，這樣保持對loading的確定。

import { Button } from "antd";
import React, { useEffect, useState } from "react";
const PromisePage = () => {const [dataList, setDataList] = useState([]);const [currentBlob, setCurrentBlob] = useState("");const handleClick = () => {console.log("測試開始");setDataList([{blob: "blob1",file: true,url: "",watermark: "",hasUpload: false,},{blob: "blob4",file: true,url: "",watermark: "",hasUpload: true,value: "blob4_value",hasData: true, // 緩存數據},{blob: "blob3",file: true,url: "",watermark: "",hasUpload: true,value: "blob3_value",},{blob: "blob2",file: true,url: "",watermark: "",hasUpload: false,},]);};const uploadImg = () => {console.log("uploadImg");const imgItem = dataList.find((item) => item.hasUpload === false && item.blob === currentBlob,);if (imgItem && !imgItem.apiOnce) {setDataList((pre) =>pre.map((item) => {if (item.blob === imgItem.blob) {// console.log("模擬接口 item",);return { ...item, apiOnce: true };}return item;}),);console.log("模擬上傳 start", currentBlob);setTimeout(() => {console.log("模擬上傳 end", currentBlob);// 隨機值const random = Math.random();if (random > 0.5) {setDataList((pre) =>pre.map((item) => {if (item.blob === imgItem.blob) {// console.log("模擬接口 item",);const url = currentBlob + "url";getData(url);return { ...item, value: url };}return item;}),);} else {setDataList((pre) =>pre.map((item) => {if (item.blob === imgItem.blob) {getData("error"); // fun(false, {})return { ...item, value: imgItem.blob, imgFailed: true };}return item;}),);}}, 2000);}};const getData = (url) => {// 模擬接口console.log("模擬接口 start", currentBlob, url);((url) => {})(url); // 異步setTimeout(() => {console.log("模擬接口 end", currentBlob, url);setDataList((pre) =>pre.map((item) => {if (item.blob === currentBlob) {// console.log("模擬接口 item",);return { ...item, hasData: true };}return item;}),);}, 2000);};useEffect(() => {if (dataList.length === 0) return;let blob = "";let flag = false;dataList.forEach((item) => {// 判斷是否有緩存數據 或者請求數據完成if (!item.hasData && !flag) {blob = item.blob;flag = true;}});if (blob) {setCurrentBlob(blob);}if (flag) {// console.log("loading...");} else {console.log("complete...");}}, [dataList]);useEffect(() => {if (currentBlob) {const imgItem = dataList.find((item) => item.blob === currentBlob);if (imgItem?.hasUpload) {getData(imgItem.value); // 緩存數據} else {uploadImg();}}}, [currentBlob]);return (<div><Button type="primary" onClick={handleClick} style={{ marginRight: 10 }}>測試</Button>{/* 重置按鈕 */}<Buttontype="primary"onClick={() => {setDataList([]);setCurrentBlob("");}}>重置按鈕</Button></div>);
};
export default PromisePage;