Question

我试图使用window.fetch（）从服务器获取json，但无法从响应中获取数据。我有这段代码：

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

看来这个请求是成功的，我看到状态200 和网络标签中的json响应正文 - status and response。但在console.log我没有看到json对象 - console log image

我无法理解为什么我在console.log中看不到json

Answer 1

您请求的主机站点似乎不支持CORS。因此，您无法使用fetch()发出跨域请求并获取数据。如果您将fetch()请求更改为mode: 'cors'，则调试控制台将显示主机站点未提供CORS标头，以允许浏览器向您显示请求的结果。

当您使用mode: 'no-cors'时，浏览器会隐藏您的结果（因为您无权查看它），并且您可以看到响应被标记为opaque。

在api.flightstats.com站点上进行了一点点探讨，我确实看到它支持JSONP，这将使您能够解决缺少CORS支持问题并成功完成跨源请求。

为了简单地说明它可以工作，我使用jQuery来证明可以进行JSONP请求。这是代码在工作代码段中的代码。注意我在jQuery请求中将URL从/json/更改为/jsonp/和特定dataType: "jsonp"。这会导致jQuery添加callback=xxxxx查询参数并通过相应的脚本（JSONP方法）获取响应。

＆＃13;

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) {
	log(response);
}, function(err) {
    log("$.ajax() error:")
	log(err);
})

＆＃13;

<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>

＆＃13;

Answer 2

如果你看一下Fetch API的{{3}};您会注意到API提供了各种提取数据的方法：

arrayBuffer（）
团块（）
JSON（）
文本（）
FORMDATA（）

假设响应是有效的JSON（我已经注意到它似乎没有出现），您可以使用response.json()函数来检索响应数据。这也使用了Promise机制，就像使用Fetch API。

的所有内容一样

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

如何从window.fetch（）响应中获取数据？

2 个答案: