JavaScript异步读CSV返回二维数组 外部访问元素报错解决

问题背景 #

• 待处理CSV文件由Excel导出，存放于服务端，最终目标是基于文件数据完成统计计算
• 此前尝试使用papaparse、csv-parser等工具实现解析需求均出现报错，因此自行编写异步解析函数

现有实现代码 #

自定义的CSV解析转二维数组的异步函数如下，函数内部可正常遍历返回的fin数组：

async function getData(){
    const rep=await fetch('datan2.csv')
    const data=await rep.text();
    let fin=[]
    const table=data.split('\n').slice(1)
    table.forEach(row=>{
        const colums=row.split(',');
        tab=[colums[0], colums[1],colums[2]]
        fin.push(tab)  
        });
        return fin
    }

故障现象 #

在getData函数外部调用函数时，直接打印返回值可正常输出，但访问数组具体元素时报错，测试代码如下：

t=getData()
console.log(t)// 可正常输出
console.log(t[0][0])// 访问报错

• 核心诉求：能够在getData方法外部正常遍历解析得到的二维数组，完成后续数据统计逻辑，需要明确问题原因与可行解决方案。

问题原因 #

所有async声明的函数，返回值永远是Promise实例，不会直接返回函数内部return的普通值。
直接打印t时看到的数组内容，是浏览器控制台对Promise对象做的异步懒求值展示，不代表同步执行阶段已经拿到了数组本身。此时变量t本质是Promise对象，不是二维数组，自然不存在[0][0]下标属性，直接访问就会报错。

解决方案 #

两种标准写法都可以拿到真实的二维数组：

写法1：使用await等待异步解析完成 #

await关键字可以等待Promise状态变更为fulfilled，拿到内部返回的真实值。注意非ES模块环境下，await只能写在async函数内部：

// 包裹业务逻辑的异步函数
async function initStats() {
  // 等待CSV解析完成，拿到真实二维数组
  const t = await getData();
  // 此时可以正常访问、遍历数组
  console.log(t[0][0]);
  // 后续统计计算逻辑直接写在这里即可
}
// 启动逻辑
initStats();

如果是ES模块环境，可以直接使用顶层await，不需要额外包裹函数：

const t = await getData();
console.log(t[0][0]);

写法2：使用Promise实例的then回调获取结果 #

getData().then(t => {
  // 回调入参t就是解析完成的二维数组
  console.log(t[0][0]);
  // 后续统计遍历逻辑写在then回调内部即可
})

额外提示 #

当前手写的CSV解析逻辑存在兼容性问题：如果CSV单元格内容本身包含逗号、换行符，直接用split(',')、split('\n')会错误拆分单元格导致数据错位。如果后续遇到数据解析异常，建议优先排查之前第三方库报错的根因（通常是服务端文件路径配置、请求CORS、文件编码问题，并非解析库本身的功能问题）。

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