如何从API获取FETCH结果以存储为全局变量？ [英] How do I get fetch result from API to store as a global variable?

问题描述

我正在做一个项目，在该项目中我提取了美国GDP的API，然后从数据中创建了一个图表。现在我被问题的第一部分搞得焦头烂额，因为我正在努力让JSON存储在一个变量中，这样我就可以在我的项目的睡觉中使用它了。我已经查看了其他几个主题，但还没有找到适合我的解决方案。

下面是我当前的代码。

let jsondata =;

fetch('https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json').then(
    function(u){ return u.json();}
  ).then(
    function(json){
        jsondata = json;
        console.log(jsondata)
    }
  )


console.log(jsondata)

目前，我可以在第二个函数中使用console.log(Json)和console.log(Jsondata)。然而，即使我在函数外部声明了变量，它也不会使变量成为其自身的全局变量。我错过了什么？

推荐答案

fetch是异步函数。这意味着当调用该函数时，它将被添加到事件循环中，并且代码将继续。当它到达最后一行时，jsondata变量还没有填充，因为fetch函数还没有完成。

您应该在您的函数前面添加一个await，以确保它在代码继续之前完成。有关示例，请参阅：https://dev.to/shoupn/javascript-fetch-api-and-using-asyncawait-47mp

let jsondata = "";
let apiUrl = "https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json"

async function getJson(url) {
    let response = await fetch(url);
    let data = await response.json()
    return data;
}

async function main() {
    //OPTION 1
    getJson(apiUrl)
        .then(data => console.log(data));

    //OPTION 2
    jsondata = await getJson(apiUrl)
    console.log(jsondata);
}

main();

这篇关于如何从API获取FETCH结果以存储为全局变量？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！