有没有办法将获取的 API 数据存储在全局变量中？答案

【问题标题】：Is there a way to store fetched API data in a global variable?有没有办法将获取的 API 数据存储在全局变量中？
【发布时间】：2021-02-13 04:20:59
【问题描述】：

我想从 API 获取数据并将其存储到变量中，然后将该变量导出到其他模块以实现可重用性。但是，我似乎无法弄清楚如何重用数据..

// getData.js
let data;
async function getData(){
  let fetchedData = await fetch('someURL').then(value => value.json());
  data = fetchedData;
}
export { data };

// otherModule.js
import { data } from './getData.js';
console.log(data);

如果我这样做，我知道data 实际上不会等待承诺解决/拒绝并打印为空。那么，有没有办法将获取的数据存储在可以导出到其他模块的变量中？

【问题讨论】：

你试过了吗？
可能不会。您还混合了 async/await 和 Promise 链接。选择一种方法等待 promise 解决。
导出承诺，而不是绑定到可能在未知时间填充的变量。

标签： javascript module async-await promise

【解决方案1】：

// getData.js
async function getData(){
  const response = await fetch('someURL');
  const data = await response.json();
  return data;
}

export { getData };

// otherModule.js
import { getData } from './getData.js';

getData().then((data) => {
  console.log(data);
})

【讨论】：

这不会缓存模块之间的响应，您将在每个导入和使用它的模块中一遍又一遍地获取它。
是的。但这不是问题的要求。如果您需要缓存，请添加一些缓存。
我认为However, I can't seem to figure out how to reuse the data.. 听起来（即使没有直接说明）缓存是一种要求。
可以记忆调用或使用其他存储值的方式。取决于这段代码在哪里执行，react、angular、plain js、vue、node 等。但是那个上下文不在问题中。
我很抱歉造成混乱。一般来说，我是堆栈溢出和编码的新手。我是在暗示某种缓存，这样我就不会一遍又一遍地调用 api（以节省执行时间并防止超过每天的免费 api 调用限制）。顺便说一句，我只是使用普通的 js。

【解决方案2】：

你似乎在寻找

// getData.js
export const dataPromise = fetch('someURL').then(value => value.json());

// otherModule.js
import { dataPromise } from './getData.js';
dataPromise.then(data => {
  console.log(data);
});

【讨论】：