等待使用 Papaparse 加载几个 CSV 文件答案

【问题标题】：Waiting for Several CSV files to load with Papaparse等待使用 Papaparse 加载几个 CSV 文件
【发布时间】：2019-06-13 19:18:29
【问题描述】：

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

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

【问题讨论】：

标签： javascript csv papaparse

【解决方案1】：

更现代的方法是使用 Promise。

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

然后在三个promise都解决后使用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() 来处理该失败

【讨论】：

感谢您的信息，我知道 Internet Explorer 上不提供承诺？这是我需要这个应用程序工作的浏览器，我可以做些什么来解决这个问题吗？
如果不支持Promise对象，可以包含一个promise库