Question

在运行页面上的代码之前，我一直试图加载多个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()">

这是使程序顺畅运行的正确方法吗？

Answer 1

一种更现代的方法是使用诺言。

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

然后在所有三个承诺都解决后，使用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()与Promise.all()一起使用来处理该故障

等待几个CSV文件与Papaparse一起加载

1 个答案: