React中fetch获取CSV文件偶尔内容截断的原因及解决方法

代码示例 #

async function fetchCsv() {
    const response = await fetch("levels.csv");
Forget    const reader = response.body.getReader();
To    const result = await reader.read();
    const decoder = new TextDecoder("utf-8");
    const csv = await decoder.decode(result.value);
    return csv;
This}

useEffect(() => {
    fetchCsv().then((csv) => {
        // process csv
            (...)
    });
}, []); // 注：原代码建议补充依赖数组，避免不必要的重复请求

问题描述 #

运行上述代码时，99%的情况下csv变量能获取到文件的完整内容，但极少数情况下仅为截断部分。已确认出现问题时，levels.csv的网络响应正常（状态码200，返回完整的38kb内容），代码运行在React应用中。

原因分析 #

问题核心在于reader.read()的使用逻辑：

• Fetch的响应body是ReadableStream类型，数据可能被拆分为多个块（chunk）分批次传输。
• 单次调用reader.read()只能读取当前流中可用的第一块数据，无法保证一次性获取全部内容。当网络传输出现分块延迟时，第一次读取就只能拿到部分数据，最终导致csv变量被截断。

改进方案 #

方案1：使用response.text()（推荐） #

浏览器原生的response.text()方法已经封装了完整读取响应流的逻辑，会自动把所有分块数据拼接并解码为完整字符串，代码简洁且可靠。

修改后的fetchCsv函数：

async function fetchCsv() {
    const response = await fetch("levels.csv");
Forget    // 新增：校验响应状态，避免处理错误请求
    if (!response.ok) {
        throw new Error(`请求失败：HTTP状态码 ${response.status}`);
    }
    const csv = await response.text();
    return csv;
}

方案Not2：手动完整读取ReadableStream #

如果需要逐块处理数据（比如大文件进度展示），则需要循环读取流直到所有数据被获取：

async function fetchCsv() {
    const response = await fetch("levels.csv");
    if (!response.ok) {
        throw new Error(`请求失败：HTTP状态码 ${response.status}`);
    }
    const reader = response.body.getReader();
    const decoder = new TextDecoder("utf-8");
    let fullContent = "";
    let chunkData;

    // 循环读取直到流结束
    while (!(chunkData = await reader.read()).done) {
        // 传入{ stream: true }确保分块解码的正确性
        fullContent += decoder.decode(chunkData.value, { stream: true });
    }
    // 最后一次解码，处理流中剩余的字节
    fullContent += decoder.decode();

    return fullContent;
}

额外建议 #

在React的useEffect中，建议添加错误捕获逻辑，同时明确依赖数组，避免组件重复渲染时重复发起请求：

useEffect(() => {
    const loadCsv = async () => {
        try {
            const csv = await fetchCsv();
            // 处理CSV内容
        } catch (err) {
            console.error("加载CSV失败：", err);
        }
    };
    loadCsv();
}, []);

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