2016-03-27 13 views
4

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:Wie man Daten von window.fetch() Antwort erhält?

> 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

+0

Es sieht für mich wie die Website CORS nicht unterstützt und Sie müssen CORS, um Daten von einer Quer Herkunft mit einem Ajax-Aufruf zu erhalten. Diese Site unterstützt JSONP, sodass Sie diesen Mechanismus verwenden können. Wenn Sie auf einer Kreuzursprungsseite bestimmte Nicht-Korsagen haben, erhalten Sie eine undurchsichtige Antwort zurück, was bedeutet, dass Sie nicht sehen dürfen, dass die tatsächlichen Daten zurückgegeben wurden. Sie müssen Ihre Zugriffsrechte korrigieren. Wenn Sie diese Anfrage auf "cors" setzen, dann wird es Ihnen sagen, dass Corse-Header hier nicht vorhanden sind.Es sieht für mich so aus, als müsste man JSONP aus dem Browser benutzen. – jfriend00

Antwort

5

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>

+0

Ja, jsonp ist in diesem Fall gearbeitet. Vielen Dank für die Hilfe – Rielon

+0

@Rielon, wenn Sie wollen, verwenden Sie pure JavaScript (keine jQuery), können Sie https://github.com/robertodecurnex/J50Npi 'J50Npi.getJSON (URL, Daten, Rückruf)' – Binyamin

4

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); 
}); 
+0

Es sieht so aus, als ob die Zielseite keine CORs unterstützt, daher muss das OP JSONP verwenden, um eine Cross-Origin-Anfrage zu stellen. – jfriend00