如何将danfo.js异步函数生成的DataFrame赋值给全局变量

想要实现的目标 #

• 使用danfo.js从URL读取CSV文件
• 将读取得到的danfo.js DataFrame（类似pandas中的DataFrame）赋值给全局变量，方便在绘制图表等场景复用

已完成操作 #

已创建异步函数读取CSV文件：

const url = 
    "https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv"; 

async function readCSV(url) {
    try {
        const df = await dfd.readCSV(url);

        console.log("df describe: ");
        df.describe().print(); // 打印DataFrame的统计摘要

    } catch (error) {
        console.error(error);
    }
}

readCSV(url)

遇到的问题 #

从CSV读取创建的DataFrame仅能在异步函数内部使用，无法在外部全局场景调用。

我的疑问 #

如何将DataFrame从异步函数中取出并赋值给全局变量？

已尝试的方案 #

在readCSV函数中添加return语句，但每次使用DataFrame都需要重新调用函数读取CSV，操作繁琐：

async function readCSV(url) {
    try {
        const df = await dfd.readCSV(url);
        return df;
    } catch (error) {
        console.error(error);
    }
}

readCSV(url).then((df) => {
    console.log("df head: ");
    df.head().print(); 
});

解决方案 #

方法一：声明全局变量，在异步函数中赋值 #

先声明一个全局变量，在异步函数读取到DataFrame后直接赋值给它。需要注意异步操作的执行顺序，确保数据加载完成后再使用全局变量：

// 声明全局变量
let globalDf;
const url = "https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv"; 

async function readCSV(url) {
    try {
        const df = await dfd.readCSV(url);
        // 将DataFrame赋值给全局变量
        globalDf = df;
        console.log("df describe: ");
        df.describe().print();
    } catch (error) {
        console.error(error);
    }
}

// 调用读取函数
readCSV(url);

// 封装使用全局变量的逻辑，确保数据已加载
async function useGlobalData() {
    // 如果全局变量还未赋值，等待读取完成
    if (!globalDf) await readCSV(url);
    console.log("全局DataFrame的前5行：");
    globalDf.head().print();
    // 这里可以添加绘制图表等业务逻辑
}

// 在需要的时候调用useGlobalData
useGlobalData();

方法二：用立即执行异步函数初始化全局变量（避免重复读取） #

通过立即执行异步函数一次性加载数据并赋值给全局变量，后续直接复用该变量：

let globalDf;
const url = "https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv"; 

// 立即执行异步函数，仅读取一次CSV
(async () => {
    try {
        globalDf = await dfd.readCSV(url);
        console.log("数据加载完成，全局变量已赋值");
        // 可以在这里直接执行初始化逻辑，比如绘制图表
        globalDf.head().print();
    } catch (error) {
        console.error(error);
    }
})();

// 后续使用全局变量时先判断是否已加载
function drawChart() {
    if (!globalDf) {
        console.log("数据尚未加载完成，请稍后再试");
        return;
    }
    // 编写绘制图表的逻辑，使用globalDf
}

优化：避免重复读取CSV #

可以在读取函数中添加判断，如果全局变量已有值，直接返回该值，无需重新请求：

async function readCSV(url) {
    // 全局变量已存在，直接返回
    if (globalDf) return globalDf;
    try {
        const df = await dfd.readCSV(url);
        globalDf = df;
        return df;
    } catch (error) {
        console.error(error);
    }
}

参考资料 #

• 《如何使用async/await从异步函数中返回值？》
• 《如何从异步调用中返回响应？》

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