javascript - 在 typescript/javascript 中使用 fetch 读取 JSON

Question

我在互联网上寻找这些东西，我发现: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch 。我对 typescript 比较陌生，所以有一些事情让我感到困惑。

首先有什么区别:

fetch('data.json')
.then(function(response) {
    return response.json();
})
.then(function(myJson) {
    console.log(JSON.stringify(myJson));
   //data = myJson;
});

和

fetch('data.json')
.then(function(response) {
    console.log(JSON.stringify(response.json()));
    //data = response.json();
})

第一段代码运行良好，但第二段代码则不然。这是为什么？据我所知， fetch 返回了 JSON 的 promise ，并且在 .then 中，response.json() 成立实际的 JSON 对象。但第二个版本不起作用(我在控制台中得到undefined)。

我的第二个问题是如何获取myJson的值。我尝试使用全局变量来做到这一点，但它不起作用(我在控制台中得到未定义):

var data
fetch('data.json')
.then(function(response) {
    return response.json();
})
.then(function(myJson) {
   //console.log(JSON.stringify(myJson));
   data = myJson;
});
console.log(JSON.stringify(data));

Answer 1

我们需要使用 response.json() 的原因是 Fetch 返回 HTTP 响应。要从响应中提取 JSON 正文内容，我们使用 json() 方法。

您得到undefined的原因是由于JavaScript的async本质。尝试使用 async 和 await 来解决此问题，或者在 then() 内部而不是外部打印数据。