前端批量请求场景

文章目录

一、批量请求
- 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;