对读取的Excel文件数据进行拆分并发请求发送到后端服务器

2024-01-22 22:20

本文主要是介绍对读取的Excel文件数据进行拆分并发请求发送到后端服务器,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

首先,我们先回顾一下文件的读取操作:

本地读取Excel文件并进行数据压缩传递到服务器-CSDN博客

第一步:根据以上博客,我们将原先的handleFile方法,改为以下内容:

const handleFile = async(e) => {console.time('test')const file = e.target.files[0];const results = await new Promise((resolve,reject) => {Papa.parse(file,{header:true,skipEmptyLines:true,complete:resolve, //成功时的回调error:reject //失败时的回调})})const data = results.data;console.log(data)};

先对data数据进行打印,获取到一千多行的数据信息

那么如何对1000多条信息进行分组处理呢??? 

因为我们要对数据进行拆分,所以我们可以将此数据分成200个记录为一组的分组操作。

第二步:对数据进行分组操作

const batchSize = 200;
const dataChunks = [];
for(let i=0;i<data.length;i+=batchSize){const dataChunks = data.slice(i,i + batchSize);dataChunks.push(dataChunks);
}console.log(data,dataChunks)

第三步:引入eachLimit并对此进行操作

import { eachLimit } from "async"; //引入第三方类库  需要安装

以下的handleFile的全部代码

    const [results,setResults] = useState([]); //保留解析后的数据const [progress,setProgress] = useState({completed:0,total:0});const handleFile = async(e) => {console.time('test')const file = e.target.files[0];const results = await new Promise((resolve,reject) => {Papa.parse(file,{header:true,skipEmptyLines:true,complete:resolve, //成功时的回调error:reject //失败时的回调})})const data = results.data;console.log(data)const batchSize = 200;const dataChunks = [];for(let i=0;i<data.length;i+=batchSize){const dataChunks = data.slice(i,i + batchSize);dataChunks.push(dataChunks);}console.log(data,dataChunks) //输出原先数据以及分组后的数据const processData = async(dataChunks) => {const totalChunks = dataChunks.length; //总共需要发送的请求次数let completedChunks = 0; //已经完成的请求次数const resultsArray = []; //保存所有请求的结果const notifyProgress = () => {setProgress({completed: completedChunks,total: totalChunks,})}await eachLimit(dataChunks,5,async(chunk) => {const gzip = pako.gzip(JSON.stringify(chunk),{to:"string"});try{const response = await fetch('http://localhost:3000',{method:"POST",body:gzip,headers:{"Content-Type":"application/octet-stream",}});const result = {index:dataChunks.indexOf(chunk),success:response.ok,status:response.status,message:response.statusText,};resultsArray.push(result);completedChunks++;notifyProgress();setResults([...resultsArray]);}catch (error){const result = {index:dataChunks.indexOf(chunk),success:false,status:500,message:error.message,};resultsArray.push(result);completedChunks++;notifyProgress();setResults([...resultsArray]);}});console.timeEnd("test")}await processData(dataChunks);};
<input type="file" onChange={handleFile} accept='.csv' />

进度的展示

<h2>进度的展示</h2>
<div>Progress: { progress.completed } / { progress.total }
</div>

结果展示

<h2>结果显示</h2>
<ul>{results && results.map(result => {return <li key={result.index}>{result.index} - {result.success.toString()} - {result.status} - {""}{result.message}</li>})}
</ul>

此时,我们就可以尝试读取一个文件进行测试

由此看出,我们的顺序并不是按照顺序来排列的,那是因为我们进行请求的并发处理并不代表一定是按照顺序去进行数据的返回,因为可能在请求中,因为网络的问题先请求的操作可能会成为后返回的操作。

而result也是按照一定的批次进行返回的,而不是一条一条返回。

此时,我们点击修改背景颜色的按钮,也会很卡顿,所以这种情况需要在后续进行性能优化。

那么以上就是这些内容,希望对您有所帮助。 

这篇关于对读取的Excel文件数据进行拆分并发请求发送到后端服务器的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/634410

相关文章

Pandas使用AdaBoost进行分类的实现

《Pandas使用AdaBoost进行分类的实现》Pandas和AdaBoost分类算法,可以高效地进行数据预处理和分类任务,本文主要介绍了Pandas使用AdaBoost进行分类的实现,具有一定的参... 目录什么是 AdaBoost?使用 AdaBoost 的步骤安装必要的库步骤一:数据准备步骤二:模型

Pandas统计每行数据中的空值的方法示例

《Pandas统计每行数据中的空值的方法示例》处理缺失数据(NaN值)是一个非常常见的问题,本文主要介绍了Pandas统计每行数据中的空值的方法示例,具有一定的参考价值,感兴趣的可以了解一下... 目录什么是空值?为什么要统计空值?准备工作创建示例数据统计每行空值数量进一步分析www.chinasem.cn处

使用Pandas进行均值填充的实现

《使用Pandas进行均值填充的实现》缺失数据(NaN值)是一个常见的问题,我们可以通过多种方法来处理缺失数据,其中一种常用的方法是均值填充,本文主要介绍了使用Pandas进行均值填充的实现,感兴趣的... 目录什么是均值填充?为什么选择均值填充?均值填充的步骤实际代码示例总结在数据分析和处理过程中,缺失数

如何使用 Python 读取 Excel 数据

《如何使用Python读取Excel数据》:本文主要介绍使用Python读取Excel数据的详细教程,通过pandas和openpyxl,你可以轻松读取Excel文件,并进行各种数据处理操... 目录使用 python 读取 Excel 数据的详细教程1. 安装必要的依赖2. 读取 Excel 文件3. 读

SpringBoot请求参数接收控制指南分享

《SpringBoot请求参数接收控制指南分享》:本文主要介绍SpringBoot请求参数接收控制指南,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Spring Boot 请求参数接收控制指南1. 概述2. 有注解时参数接收方式对比3. 无注解时接收参数默认位置

Go语言开发实现查询IP信息的MCP服务器

《Go语言开发实现查询IP信息的MCP服务器》随着MCP的快速普及和广泛应用,MCP服务器也层出不穷,本文将详细介绍如何在Go语言中使用go-mcp库来开发一个查询IP信息的MCP... 目录前言mcp-ip-geo 服务器目录结构说明查询 IP 信息功能实现工具实现工具管理查询单个 IP 信息工具的实现服

Spring Boot读取配置文件的五种方式小结

《SpringBoot读取配置文件的五种方式小结》SpringBoot提供了灵活多样的方式来读取配置文件,这篇文章为大家介绍了5种常见的读取方式,文中的示例代码简洁易懂,大家可以根据自己的需要进... 目录1. 配置文件位置与加载顺序2. 读取配置文件的方式汇总方式一:使用 @Value 注解读取配置方式二

Spring 请求之传递 JSON 数据的操作方法

《Spring请求之传递JSON数据的操作方法》JSON就是一种数据格式,有自己的格式和语法,使用文本表示一个对象或数组的信息,因此JSON本质是字符串,主要负责在不同的语言中数据传递和交换,这... 目录jsON 概念JSON 语法JSON 的语法JSON 的两种结构JSON 字符串和 Java 对象互转

C++如何通过Qt反射机制实现数据类序列化

《C++如何通过Qt反射机制实现数据类序列化》在C++工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作,所以本文就来聊聊C++如何通过Qt反射机制实现数据类序列化吧... 目录设计预期设计思路代码实现使用方法在 C++ 工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作。由于数据类

SpringBoot使用GZIP压缩反回数据问题

《SpringBoot使用GZIP压缩反回数据问题》:本文主要介绍SpringBoot使用GZIP压缩反回数据问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录SpringBoot使用GZIP压缩反回数据1、初识gzip2、gzip是什么,可以干什么?3、Spr