网站配色方法,dede仿wordpress,WordPress mip,wordpress 管理员权限设置密码文章目录 一、批量请求1、Promise.allSettled2、返回值穿透 二、案例1、 批量任务2、缓存优化3、另一种实现方式 一般时候前端都是简单的查询任务#xff0c;复杂的数据获取都是后台处理好再返回#xff0c;如果遇到接口流程化处理、数据组装#xff0c;可以参考一下。 一、… 文章目录 一、批量请求1、Promise.allSettled2、返回值穿透 二、案例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 div213231/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 div213231/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 (divButton typeprimary onClick{handleClick} style{{ marginRight: 10 }}测试/Button{/* 重置按钮 */}ButtontypeprimaryonClick{() {setDataList([]);setCurrentBlob();}}重置按钮/Button/div);
};
export default PromisePage;
