使用Papaparse加载CSV文件异常：仅能加载首个区块无法获取完整内容

你的代码错误出在fetchCsv函数的实现：response.body.getReader()生成的流读取器单次调用read()只能获取响应流的首个数据块，你没有循环读取完整流就直接返回了解码后的部分内容，因此传入PapaParse的本身就不是完整的CSV文件。PapaParse仅会解析传入的所有内容，解析完成后自然会触发complete回调，和PapaParse的配置无关。

你之前尝试用step替代chunk没有效果，也是因为传入PapaParse的内容本身就只有首个数据块的内容，不管用什么解析回调都只能处理这部分不完整的数据，自然没法拿到全部500行数据。

方案1：小文件直接读取完整文本 #

针对你当前仅500行的小CSV文件，无需手动处理流，直接调用fetch内置的text()方法即可获取完整文件内容，同时可以省去手动拼接chunk的逻辑：

async getData() {
    const self = this;
    Papa.parse(await this.fetchCsv(), {
        delimiter: ',',
        header: true,
        complete: function (results) {
            self.updateData(results.data);
        }
    });
}

async fetchCsv() {
    const response = await fetch(this.props.location.state.filename);
    return await response.text();
}

方案2：大文件流式处理 #

如果后续需要处理更大的CSV文件，想保留流式分块处理的逻辑，可以直接将响应流传入PapaParse，PapaParse原生支持流式解析，不需要你手动操作流读取器：

async getData() {
    const self = this;
    let dataList = [];
    const response = await fetch(this.props.location.state.filename);
    Papa.parse(response.body, {
        delimiter: ',',
        header: true,
        chunk: function (result, parser) {
            parser.pause();
            dataList = dataList.concat(result.data);
            parser.resume();
        },
        complete: function () {
            self.updateData(dataList);
        }
    });
}

内容的提问来源于stack exchange，提问作者Jenny