Javascript 正在从FileReader（）返回结果？

我正在尝试制作一个简单的csv到JSON转换器（只是为了练习），但是我没有找到任何方法从

FileReader（）

函数中获取返回的数据。我不知道这是否可能

下面的代码就是这样做的：它只需要抓取一个csv文件，然后按下按钮，尝试运行一个函数，将其转换为数组（到目前为止）。打印数组的是console.log，它可以正常工作，但是如果我想返回这个数组以便将它传递给另一个函数，该怎么办？每当我使用return

csvArrayconsole.log（fileToArray（fileinput））我没有定义。我还没有在网上找到任何使用vanilla JS的相关信息


const fileinput=document.querySelector（“#csvfile”）.files[0]；
const convertBtnFile=document.querySelector（“#convertBtn”）；
convertBtnFile.addEventListener（“单击”，（e）=>{
e、 预防默认值（）；
fileToArray（fileinput）；
});
const fileToArray=（csvFile）=>{
const myFile=new FileReader（）；
myFile.onload=（事件）=>{
const wholeText=event.target.result；
const splitLines=wholeText.split（/\r\n |\n/）；
csvArray=splitLines.map（i=>i.split（“，”）；
console.log（csvArray）；
}
readAsText（csvFile）；
}

Convert
您的代码出错的一件事是

const fileinput = document.querySelector("#csvfile").files[0];

立即-在尝试读取文件之前，您希望等待，直到您进入单击处理程序

最简单的答案是在
fileToArray
函数中使用回调

const convertBtnFile = document.querySelector("#convertBtn");

convertBtnFile.addEventListener("click", (e) => {
    e.preventDefault();
    const fileinput = document.querySelector("#csvfile").files[0];
    fileToArray(fileinput, data => {
        // do things with results here *********
    });
});

const fileToArray = (csvFile, cb) => { // ********
    const myFile = new FileReader();
    myFile.onload = (event) => {
        const wholeText = event.target.result;
        const splitLines = wholeText.split(/\r\n|\n/);
        csvArray = splitLines.map(i => i.split(","));
        cb(csvArray); // **** call the supplied function with the results
    }
    myFile.readAsText(csvFile);
}

如果您对async/await感到满意，您可以这样做——好处是，它“看起来”是同步的

const convertBtnFile = document.querySelector("#convertBtn");

//                                 note: vvvvv async
convertBtnFile.addEventListener("click", async (e) => {
    e.preventDefault();
    const fileinput = document.querySelector("#csvfile").files[0];
    const data = await fileToArray(fileinput);
    // do things here
});

const fileToArray = csvFile => {
    return new Promise((resolve, reject) => {
        const myFile = new FileReader();
        myFile.onload = event => {
            const wholeText = event.target.result;
            const splitLines = wholeText.split(/\r\n|\n/);
            csvArray = splitLines.map(i => i.split(","));
            resolve(csvArray);
        }
        myFile.onerror = reject;
        myFile.readAsText(csvFile);
    });
};

我怎么知道FilreRead（）是异步的呢？
-文档的第一行是：FileReader对象允许web应用程序异步读取文件的内容。。。。1. <代码>5000字一般答案的哪一部分

-适用于代码的部分。。。。3.

像你这样的家伙让StackOverflow对新手程序员来说不是一个友好的地方。

-你已经成为会员7年了。。。因此，您不是新手：pyour函数

fileToArray

无法返回内容，但是，通过添加回调参数，您可以调用调用

console.log（csvArray）的函数-这就是内容可用的地方
constfileinput=document.querySelector（“#csvfile”）。文件[0]
太早了。您需要
constfileinput=document.querySelector（“#csvfile”）
然后稍后单击使用
fileinput.files[0]
@JaromandaX，我知道。该问题因某种原因而结束，因此wrt SO的政策没有理由重新提出相同的问题。应关闭并删除此项。OP可以改进他们的第一个问题，如果他们认为复制品没有回答他们的问题顺便说一句，你是JS金牌持有者。如果你认为原件被错误地关闭，你可以重新打开并回答这个问题，关闭/删除这一个，而不是鼓励回答问题，这真的是巴迪不知道我能做到这一点。Vega@JaromandaX据我所知，使函数异步的是.onload方法。在异步函数中返回的方法是回调，它的工作方式与返回类似。我理解对了吗？还有，为什么你在第二条道路上使用承诺？asynchronus.onload方法不应该返回一个承诺吗？不，异步一直是javascript的一部分，承诺是处理异步的一种相对较新的方法-承诺的主要名声是通过允许链接异步任务而不是嵌套它们来克服回调地狱/末日金字塔