JavaScript读取同目录txt文件报file.text不是函数的解决方法

• 你传入loadFile的参数是字符串形式的文件路径"file.txt"，并非浏览器原生的File实例。file.text()是File对象的专属方法，字符串类型上不存在该方法，因此触发类型错误。File实例通常来自用户通过文件选择器、拖拽操作选中的本地文件，不能直接通过文件路径字符串生成。
• async函数返回值是Promise对象，直接通过var x = loadFile("file.txt")赋值，x拿到的是未完成状态的Promise，不会是你需要的文本内容。

同目录下的静态文件直接通过fetch API读取即可，异步读取的内容需要等待Promise状态变更后才能拿到最终值，参考代码如下：

async function loadFile(filePath) {
  const response = await fetch(filePath);
  if (!response.ok) {
    throw new Error(`文件加载失败，状态码：${response.status}`);
  }
  const text = await response.text();
  console.log(text);
  return text;
}

let x;
// 异步上下文内等待赋值完成
(async () => {
  x = await loadFile("file.txt");
  // 所有需要使用x变量的业务逻辑，都需要写在await赋值之后
  console.log("变量x赋值完成，内容为：", x);
})();

如果你是直接双击本地index.html打开页面（浏览器地址栏为file://开头协议），浏览器会因本地安全策略拦截fetch请求。此时需要在文件目录启动一个本地静态HTTP服务再访问页面，可选方案：

• 使用VS Code的Live Server插件，右键index.html选择「Open with Live Server」自动启动服务
• 目录下执行命令python -m http.server，启动后访问http://localhost:8000即可

内容的提问来源于stack exchange，提问作者sutan