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

How to get data from window.fetch() response?

本文关键字：响应 获取 数据 window fetch      更新时间：2023-09-26

我试图使用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的响应主体-状态和响应。但在console.log中，我没有看到json对象控制台日志图像

我不明白为什么我在console.log 中没有看到json

您请求的主机站点似乎不支持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方法）获取响应。

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

如果您查看Fetch API的文档；您会注意到API提供了各种方法来提取数据：

  • arrayBuffer（）
  • blob（）
  • json（）
  • text（）
  • 表单数据（）

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

response.json().then(function(data) {  
    console.log(data);  
});
相关文章：