我一直在使用fetch API,并从then()
成功地将数据记录到控制台,但我正在寻找一种方法将此数据放入稍后使用的全局变量中。我能够用reactjs做到这一点,因为它的状态管理,但在vanilla JavaScript中,由于返回的promise,这很难做到
我尝试过的事情
const res = await fetch('./data.json')
.then(res => res.json())
.then(data => data) // when I log from here I get the data but can't assign it to a global variable even tried using `var`
使用async/await仍然没有希望。
const fun = async () => {
const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
return response.json()
}
2条答案
按热度按时间8xiog9wr1#
在获取远程数据的异步函数
getData
中,可以将解析后的JSON主体作为JavaScript对象获取,并将其分配给全局上下文中定义的变量dataGlobal
。当然,在声明
dataGlobal
之前,你必须等待getData
执行。因此,我使用异步IIFE。8fq7wneg2#
虽然我知道您希望为数据使用全局变量,但我建议不要使用polluting the global namespace(另请参阅:1(https://stackoverflow.com/questions/12039217/measuring-pollution-of-global-namespace)、2(https://stackoverflow.com/a/12042905/10415695)、3(https://dev.to/efpage/how-to-avoid-namespace-pollution-in-javascript-3h3)和4(https://javascript.plainenglish.io/revisiting-javascripts-global-namespace-4e21ed6fd049))。
您可以将所有内容封装在一个Immediately Invoked Function Expression (IIFE)中,并将
fetch
方法与程序中该区域相关的所有代码一起放在其中。然后,通过重新排列@alexanderdavide的答案,我们得到以下代码:
您也可以使用以下替代方法:
这样你的
data_local
变量就可以被它下面的所有变量所使用,但不能被IIFE外部,保护全局命名空间,同时允许多个方法访问同一个变量,而不使用带有data
参数的回调。**注意:**请小心,如果/当您更改数据变量时,您可能最终更改它多次,并无意中导致错误,因为丢失/格式不正确。
祝你好运