Wie man Daten von window.fetch() Antwort erhält?

Question

Ich versuche, window.fetch() zu verwenden, um Json vom Server zu bekommen, aber kann die Daten von der Antwort nicht bekommen. Ich habe diesen Code:

> let url = 
> 'https://api.flightstats.com/flex/schedules/rest/v1/json/from/SYD/to/MEL/departing/2016/3/28?appId=f4b1b6c9&appKey=59bd8f0274f2ae88aebd2c1db7794f7f'; 
> let request = new Request (url, { 
>   method: 'GET', 
>   mode: 'no-cors' 
>  }); 
> 
> fetch(request) 
>   .then(function(response){ 
>    console.log(response) 
>   }); 

Es scheint, dass dieser Antrag erfolgreich ist, ich sehe Status 200 und Antworttext mit json in Registerkarte Netzwerk - status and response. Aber in console.log nicht ich Json Objekt sehen - console log image

Ich kann nicht verstehen, warum ich in console.log

Answer 1

Die Host-Site, von der Sie anfordern, scheint CORS nicht zu unterstützen. Daher können Sie fetch() nicht verwenden, um eine Ursprungsquellanforderung zu erstellen und die Daten zurück zu erhalten. Wenn Sie Ihre fetch()-Anforderung in mode: 'cors' ändern, zeigt die Debug-Konsole an, dass die Host-Site keine CORS-Header anbietet, damit der Browser Ihnen das Ergebnis der Anfrage anzeigen kann.

Wenn Sie mode: 'no-cors' verwenden, versteckt der Browser das Ergebnis von Ihnen (weil Sie keine Berechtigung haben, es zu sehen) und Sie können sehen, die Antwort ist markiert als opaque.

In ein wenig Stochern auf der api.flightstats.com Website, habe ich gesehen, dass es JSONP unterstützt, mit dem Sie das fehlende CORS-Support-Problem umgehen und erfolgreich eine Cross-Ursprungsanforderung abschließen können.

Für die Einfachheit zu zeigen, dass es funktionieren kann, habe ich jQuery verwendet, um nur zu beweisen, dass eine JSONP-Anfrage gemacht werden kann. Hier ist dieser Code in einem Arbeits-Snippet. Hinweis: Ich habe die URL von /json/ zu /jsonp/ und spezifischen dataType: "jsonp" in der jQuery-Anforderung geändert. Dies führt dazu, dass jQuery den Abfrageparameter callback=xxxxx hinzufügt und die Antwort über das entsprechende Skript (die JSONP-Methode) abruft.

var url = 
 
'https://api.flightstats.com/flex/schedules/rest/v1/jsonp/from/SYD/to/MEL/departing/2016/3/28?appId=f4b1b6c9&appKey=59bd8f0274f2ae88aebd2c1db7794f7f'; 
 

 
$.ajax(url, {dataType: "jsonp"}).then(function(response) { 
 
\t log(response); 
 
}, function(err) { 
 
    log("$.ajax() error:") 
 
\t log(err); 
 
})

<script src="http://files.the-friend-family.com/log.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 2

siehe json nicht Wenn Sie einen Blick auf den documentation der Fetch API nehmen; Sie werden feststellen, dass die API verschiedene Methoden bietet die Daten zu extrahieren:

• Arraybuffer()
• Blob()
• json()
• text()
• Formdata()

Angenommen, die Antwort ist gültig JSON (die ich habe bemerkt, es scheint nicht angezeigt), können Sie die response.json() Funktion verwenden, um die Antwortdaten abzurufen. Dies verwendet auch einen Promise-Mechanismus, wie für alles mit der Fetch API.

response.json().then(function(data) { 
    console.log(data); 
});