将文件读取器结果保存到变量中以备将来使用

Question

我找不到简单的答案，但我的代码很简单。我尝试过类似的方法，但当我尝试console.log我的testResult时，我总是收到null。如何正确保存文件中的数据？

public getFile(
sourceFile: File
): string {
let testResult;
const file = sourceFile[0]
const fileReader = new FileReader();
fileReader.readAsText(file, "UTF-8")
fileReader.onloadend = (e) => { 
testResult = fileReader.result.toString()
} 
console.log(testResult)
return testResult
}

这个问题和我的其他主题有关，主要原因是我无法处理加载json文件、翻译它们并上传给用户。如果我能把这个文件保存在加载端之外，那么我希望我能处理剩下的文件(其他尝试都失败了，这一次一开始就阻止了我(

Answer 1

您的问题非常经典，与异步操作有关。分配给onloadend请求的函数只有在loadend事件触发时才会被调用，但其余代码不会等待它发生，而是会继续执行。因此console.log将立即执行，然后return将在其仍然为空时实际返回testResult。

首先，为了理解我刚才说的内容，将console.log(testResult)行放在onloadend处理程序中：

fileReader.onloadend = (e) => { 
testResult = fileReader.result.toString();
console.log(testResult);
}

此时testResult不为空，您可以继续在此函数中处理它。然而，如果您希望getFile方法真正可重复使用，并希望它返回testResult并在其他地方进行处理，则需要将此方法封装到Promise中，如下所示：

public getFile(
sourceFile: File
): Promise<string> {
return new Promise((resolve) => {
const file = sourceFile[0]
const fileReader = new FileReader();
fileReader.onloadend = (e) => { 
const testResult = fileReader.result.toString();
resolve(testResult);
}
fileReader.readAsText(file, "UTF-8");
});
}

现在，只要你需要一个文件，你就可以使用yourInstance.getFile方法，如下所示：

yourInstance.getFile().then(testResult => {
// do whatever you need here
console.log(testResult);
});

或者以异步/等待方式：

async function processResult() {
const testResult = await yourInstance.getFile();
// do whatever you need
console.log(testResult);
}

如果您现在熟悉promise和/或async/await，请阅读此处和此处的更多信息。