如何将fetch API请求中的json数据存储到全局变量中- javascript

wvyml7n5 于 2023-04-28 发布在 Java

关注(0)|答案(2)|浏览(335)

我一直在使用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()
}

JavaScript

来源：https://stackoverflow.com/questions/72389096/how-to-store-the-json-data-from-fetch-api-request-into-a-global-variable-javas

2条答案

按热度按时间

8xiog9wr1#

在获取远程数据的异步函数getData中，可以将解析后的JSON主体作为JavaScript对象获取，并将其分配给全局上下文中定义的变量dataGlobal。
当然，在声明dataGlobal之前，你必须等待getData执行。因此，我使用异步IIFE。

let dataGlobal;

const getData = async () => {
  const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
  const data = await response.json();
  dataGlobal = data;
  return data;
};

(async () => {
  await getData();
  console.log(dataGlobal);
})();

赞(0）回复(0）举报 2023-04-28

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的答案，我们得到以下代码：

(async () => {
  let data_local;

  const getData = async () => {
    const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
    const data = await response.json();
    dataGlobal = data;
    return data;
  };

  await getData();
  console.log(data_local);

  // your code goes here...
})();

您也可以使用以下替代方法：

(async () => {
  const getData = async () => {
    const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
    const data = await response.json();
    dataGlobal = data;
    return data;
  };

  let data_local = await getData();
  console.log(data_local);

  // your code goes here...
})();

这样你的data_local变量就可以被它下面的所有变量所使用，但不能被IIFE外部，保护全局命名空间，同时允许多个方法访问同一个变量，而不使用带有data参数的回调。

**注意：**请小心，如果/当您更改数据变量时，您可能最终更改它多次，并无意中导致错误，因为丢失/格式不正确。

祝你好运

赞(0）回复(0）举报 2023-04-28

我来回答

如何将fetch API请求中的json数据存储到全局变量中- javascript

2条答案

相关问题

热门标签

最新问答