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

Question

我一直在使用 fetch API 并从 then() 中成功地将数据记录到控制台，但我正在寻找一种方法将这些数据放入一个全局变量中稍后会用到。由于它的状态管理，我能够用 reactjs 做到这一点，但在香草 javascript 中，由于承诺返回

，很难做到

我尝试过的东西

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

Answer 1

在获取远程数据的异步函数 getData 中，您可以获取已解析的 JSON 主体作为 JavaScript 对象并将其分配给变量 dataGlobal在全局上下文中定义。

当然要等到getData执行完才可以声明dataGlobal。因此，我正在使用异步 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);
})();

Answer 2

虽然我知道您希望为您的数据设置一个全局变量，但我不建议 polluting the global namespace (see also: [1], [2], [3] and [4])。

您可以改为将所有内容封装在 Immediately Invoked Function Expression (IIFE) 中，并在其中包含您的 fetch 方法以及与程序的该区域相关的所有代码。

然后，通过重新排列，我们得到以下代码：

(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 本身之外使用，保护全局命名空间，同时允许多个方法访问同一个变量，而无需使用带有 [=14 的回调=] 参数。

注意：请小心if/when您更改了数据变量，您最终可能会多次更改它并因丢失/格式不正确而无意中导致错误数据。

祝你好运。

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

How to store the json data from fetch API request into a global variable - javascript

javascript

fetch-api