如何在 Angular 中读取文件之前检查文件是否存在？答案

【问题标题】：How to check the existence of file before reading it in Angular?如何在 Angular 中读取文件之前检查文件是否存在？
【发布时间】：2021-05-31 01:56:10
【问题描述】：

我有一个函数可以从保存的文件中获取数据到 myJson 变量中。如何检查文件是否存在而不影响以下方法？此外，该文件位于项目的 src 之一的另一个文件夹中。它位于后端专用文件夹中。如何从 Angular 访问它并检查文件是否存在？

import myJson from 'src/assets/myFile.json' ;

readFile() {
  this.savedData=myJson;
  console.log("this is data from file "+this.savedData);
  return myJson;
}
constructor (){
    this.savedData= this.readFile();
  }

【问题讨论】：

你应该使用http中的get方法。如果文件不存在，您只会得到一个可以轻松捕获的错误。
@JacopoSciampi 但如果我使用 http get 方法，我应该使用 observable 并且数据不会立即可用。我该如何解决这个数据的即时问题？
您可以在异步函数中使用toPromise 方法和await。这样您将是同步的，这意味着如果您在获取文件的函数之后还有其他代码，则数据将可用并准备就绪。
对于 BE 部分：当您托管后端时，您可以创建一个简单的 API 来返回文件，然后使用相同的 get 方法来获取文件的内容。遗憾的是，我在 BE 的事情上无法为您提供更多帮助，因为我没有这方面的经验。
@JacopoSciampi 你能帮忙处理 toPromise 并等待吗？

标签： json angular file variables frontend

【解决方案1】：

为我的 cmets 提供更多上下文，我将执行以下异步功能：

public async readFile() {
  return await new Promise((resolve,reject) => {
    this.http.get("your_path_to_file").toPromise().then(res => {
      resolve(res);
    }).catch(err => {
      reject(err);
    });
  });
}

然后调用readFile的函数：

public getFile() {
  this.saveData = this.readFile();
  // more code here if needed
}

然后我不会在构造函数中调用它，而是使用OnInit 生命周期：

public ngOnInit(): void {
  this.getFile();
}

更多关于为什么在构造函数中返回 promise 是一种不好的做法的更多数据：Is it bad practice to have a constructor function return a Promise?

【讨论】：

谢谢。问题是我立即需要数据，因为一些使用这些数据的方法在承诺完成之前运行。数据是静态的，在文件中可用，我怎样才能立即读取它，而没有承诺的延迟？
遗憾的是，在这种情况下，您不能。读取 json 数据（从文件或 API）需要异步方法。