Javascript 模块和应用程序范围的数据

Question

在编写 javascript 模块时，我很困惑，在哪里以及如何存储可以在应用程序范围内使用的数据。

假设我有一个模块可以从服务器获取一些急需的数据。假设它是配置数据。

获取数据.js

function getData() {
    return fetch('http://data.com/my-data')
    .then(response => response.json())
}

export default getData; // Returns a promise

该应用程序是一个 React 应用程序，需要渲染一些组件，但会在未定义的点使用我们的数据。

应用程序.js

import getData from 'getData.js';

getData.then((data) => {
    render( <TheBestApp />, document.getElementById(‘root') );
});

在 <TheBestApp /> 层次结构中的某个点数据将被使用。

获取数据以供此处所有应用程序使用的最佳方法是什么？ 这些是我看到的 2 个选项:

1. 以某种方式将数据传递给层次结构中的每个组件(看起来很乱)
2. 将数据存储在全局对象中，然后呈现应用程序，但我听说要避免全局范围

还有其他方法吗？这方面的最佳做法是什么？

Answer 1

我会回答你问题的“任何其他方式”部分，因为我不确定这是否是最佳实践，尤其是在 ReactJS 环境中(我没有这方面的经验)。

既然你不相信我的回答:

在 AngularJS 中，这是我使用服务的地方，就数据而言，它本质上是一个单例。您可以在 ES6 中使用类上的静态函数来模拟这一点。

例子:

export default class DataService {
  static getData() {
    if(this.data) {
      return Promise.resolve(this.data);//keeps function calls consistent
    }
    return new Promise(() => {
      fetch('http://data.com/my-data')
      .then(response => {
        response.json()
      })
      .then((data) => {
        this.data = data;
        resolve(data);
      })
    }
  }
}

然后这将被导入并使用 DataService.getData() 调用。如果您没有数据，它会获取数据，否则它会立即将数据提供给您。