Wie liest man eine JSON-Datei mit fetch() in Javascript?

Wie kann ich eine lokale JSON-Datei mit Abruffunktion in Javascript lesen? Ich habe eine JSON-Datei mit einigen Dump-Daten und einer Funktion, die die JSON-Datei auf dem Server liest. Zum Beispiel :

readJson () {
   console.log(this)
   let vm = this
   // http://localhost:8080
   fetch('/Reading/api/file').then((response) => response.json()).then(json => {
       vm.users = json
       console.log(vm.users)
   }).catch(function () {
       vm.dataError = true
   })
}

Was muss also getan werden, um die lokale JSON-Datei in dieser Abruffunktion zu lesen?

Wie kann ich eine lokale JSON-Datei mit Abruffunktion in Javascript lesen?

Wenn Sie versuchen zu lesen http://localhost:8080/Reading/api/file

… dann ist das, was Sie tun, richtig, außer dass Sie das vermissen .ok überprüfen (das ist so ein häufiger Fehler, den ich geschrieben habe ein Blogbeitrag darüber). Da Sie Pfeilfunktionen verwenden, müssen Sie dies auch nicht tun let vm = this; es sei denn, Sie bevorzugen es; Pfeilfunktionen vorbei schließen this. Damit:

readJson () {
   // http://localhost:8080
   fetch('/Reading/api/file')
   .then(response => {
       if (!response.ok) {
           throw new Error("HTTP error " + response.status);
       }
       return response.json();
   })
   .then(json => {
       this.users = json;
       //console.log(this.users);
   })
   .catch(function () {
       this.dataError = true;
   })
}

Es ist wichtig, sich daran zu erinnern, dass dies der Fall ist asynchron; readJson kehrt vorher zurück this.users hat den Wert; es wird es bekommen später. Wenn Sie wissen möchten, wann es soweit ist, Rückkehr das Versprechen also aufrufenden Code verwenden kann then darauf:

readJson () {
   // http://localhost:8080
   return fetch('/Reading/api/file')
   // ...

Mehr in den Antworten auf diese Fragen:

• Wie gebe ich die Antwort von einem asynchronen Aufruf zurück?
• Warum bleibt meine Variable unverändert, nachdem ich sie innerhalb einer Funktion geändert habe? – Asynchrone Codereferenz

Wenn Sie versuchen zu lesen /Reading/api/file aus dem Dateisystem

… dann können Sie zumindest in einigen Browsern nicht, es sei denn, Sie stellen die Datei über einen Webserverprozess bereit (da Sie die Seite anscheinend bereitstellen. Dann lesen Sie sie über eine URL auf diesem Serverprozess, wie oben gezeigt.

Um eine lokale Datei anderweitig zu lesen, muss der Benutzer die Datei identifizieren, indem er sie entweder in einer input type="file" oder in eine Dropzone ziehen. Dann würden Sie es über die lesen Datei-APInicht fetch.

Da ist das ganz Einfache API abrufen:

Sie verwenden es einfach durch:

// Replace ./data.json with your JSON feed
fetch('./data.json').then(response => {
  return response.json();
}).then(data => {
  // Work with JSON data here
  console.log(data);
}).catch(err => {
  // Do something for an error here
});