window.fetch（）レスポンスからデータを取得するには？

Question

window.fetch（）を使用してサーバーからjsonを取得しようとしていますが、応答からデータを取得できません。 私はこのコードを持っている： - status and response

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

この要求が成功しているようだ、私はネットワーク]タブでJSONでステータス200 とレスポンスボディを参照してください。 ;私はあなたがFetch APIのdocumentationを見てみた場合にconsole.log

Answer 1

あなたがリクエストしているホストサイトはCORSをサポートしていません。そのため、fetch()を使用してクロスオリジンの要求を行い、データを戻すことはできません。 fetch()要求をmode: 'cors'に変更した場合、デバッグコンソールは、ホストサイトがCORSヘッダーを提供していないことを表示し、ブラウザが要求の結果を表示できるようにします。

mode: 'no-cors'を使用している場合、ブラウザーには結果が表示されないため（表示する権限がないため）、opaqueとタグ付けされた応答が表示されます。

api.flightstats.comサイトをちょっと調べてみると、CORSサポートの問題を回避してクロスオリジンのリクエストを正常に完了できるJSONPがサポートされていることがわかりました。

簡単にわかるように、私はjQueryを使用してJSONPリクエストができることを証明しました。ここにそのコードがあります。注意URLを/json/から/jsonp/に、具体的にはdataType: "jsonp"に変更しました。これにより、jQueryはcallback=xxxxxクエリパラメータを追加し、対応するスクリプト（JSONPメソッド）を介して応答を取得します。

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

でJSONを参照してくださいいけない理由を私は理解してカントconsole log image

- しかしconsole.logに、私はJSONオブジェクトを参照してくださいいけませんあなたはAPIがデータを抽出するための様々な方法を提供することに気づくでしょう：

• arrayBuffer（）
• ブロブを（）
• JSON（）
• テキスト（）
• FORMDATA（）

レスポンスが有効なJSON（これは表示されていないようですが）の場合、response.json()関数を使用してレスポンスデータを取得できます。これはまた、Fetch APIのものと同様にPromiseメカニズムを使用します。

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