javascript - FileReader readAsText() 异步问题？

Question

我已经实现了以下代码来通过 <input type="file" /> 解析 CSV选择:

export async function parse(file: File) {
  let content = '';
  const reader = new FileReader();
  reader.onload = function(e: any) {
    content = e.target.result;
  };
  await reader.readAsText(file);
  const result = content.split(/\r\n|\n/);
  return result;
}

如果我运行这段代码并在我声明 result 的行上放置一个断点，它成功地检索了文件的内容。如果我不放置任何断点，则内容为空。如您所见，我添加了 await到阅读器将文件作为文本读取的行，但它仍然无法正常工作。

Answer 1

await 在这里没有帮助。 readAsText() doesn't return a Promise .

您需要将整个过程包装在 Promise 中:

export function parse(file: File) {
  // Always return a Promise
  return new Promise((resolve, reject) => {
    let content = '';
    const reader = new FileReader();
    // Wait till complete
    reader.onloadend = function(e: any) {
      content = e.target.result;
      const result = content.split(/\r\n|\n/);
      resolve(result);
    };
    // Make sure to handle error states
    reader.onerror = function(e: any) {
      reject(e);
    };
    reader.readAsText(file);
  });
}