如何从 API 获取结果以存储为全局变量？ [复制]

Posted 2023-02-16

【中文标题】如何从 API 获取结果以存储为全局变量？ [复制]

【英文标题】：How do I get fetch result from API to store as a global variable? [duplicate]

【发布时间】：2020-07-28 09:27:17

【问题描述】：

我正在做一个项目，我在其中提取美国 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)。但是，即使我在函数之外声明了变量，它也不会使变量成为全局变量。我错过了什么？

【问题讨论】：

变量是全局的，你只是在它被分配之前打印它。

将 json 数据的 promise 存储在全局变量中，然后在每次需要数据时等待它。

【参考方案1】：

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

【讨论】：

谢谢！我尝试了以下让jsondata； fetch('raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/…( await function(u) return u.json(); ).then( await function(json) jsondata = json; console.log(jsondata) ) console.log(jsondata) 然而我现在收到错误消息“参数列表后未捕获的语法错误：缺少)”，这引用了我的第一个等待行。有什么想法吗？

检查我的更新答案