时间戳

首页 > 解决方案 > 等待使用 Papaparse 加载几个 CSV 文件

javascript - 等待使用 Papaparse 加载几个 CSV 文件

问题描述

在我的页面上运行代码之前，我一直在尝试加载几个 CSV 文件，因为它使用 CSV 文件中的数据。我使用 PAPAPARSE.js 作为库来帮助我解决这个问题，我想出了以下解决方案。

function loadData(){
    console.log("Loading Data!")
    loadNodeData();
    loadEdgeData();
    loadHeadendData();
    setup();
}

function loadNodeData(){    
    Papa.parse("Data/CSV1.csv", {
        download: true,
        step: function(row) {
            NodeData.push(row.data)
        },
        complete: function() {
            console.log("Loaded Node Data!");
            load1 = true;
        }
    });
}
function loadEdgeData(){    
    Papa.parse("Data/CSV2.csv", {
        download: true,
        step: function(row) {
            EdgeData.push(row.data)
        },
        complete: function() {
            console.log("Loaded Edge Data!");
            load2 = true;
        }
    });
}
function loadHeadendData(){ 
    Papa.parse("Data/CSV3.csv", {
        download: true,
        step: function(row) {
            HeadendArr.push(row.data)
        },
        complete: function() {
            console.log("Loaded Headend Data!");
            load3=true;
        }
    });
}

function setup() {
    intervalID = setInterval(isDataLoaded,100)
}

function isDataLoaded(){
    //Attempt to setup the page, this will only work if the data iss loaded.
    if(load1 && load2 && load3){
        console.log("LOADED");      
        _setupSearchOptions();
    }
}

我有以下设置，但是我不知道这是否是进行此类操作的最佳方法。loadData 在页面加载时触发

<head onload="loadData()">

这是使程序流畅的正确方法吗？

标签： javascriptcsvpapaparse

解决方案

更现代的方法是使用 Promise。

您可以通过创建一个函数来减少代码重复，该函数在 url 和 step 数组中传递以推送并将调用包装在一个在回调Papa.parse()中得到解决的Promise 中。complete

然后在所有三个承诺解决后使用Promise.all()调用_setupSearchOptions()

就像是：

function parseCsv(url, stepArr){
   return new Promise(function(resolve, reject){
       Papa.parse(url, {
           download:true,
           step: function(row){
              stepArr.push(row.data)
           },
           complete: resolve       
       });        
   });
}

function loadData(){        
    const nodeReq = parseCsv("Data/CSV1.csv", NodeData);
    const edgeReq = parseCsv("Data/CSV2.csv", EdgeData);
    const headReq = parseCsv("Data/CSV3.csv", HeadendArr);
    Promise.all([ nodeReq, edgeReq, headReq]).then(_setupSearchOptions);       
}

请注意，此处未考虑错误处理。大概 Papa.parse api 也有一些失败或错误回调，您可以使用它们来调用reject()并使用catch()withPromise.all()来处理该失败

推荐阅读