从Fetch导出数据以在NodeJS中的其他位置使用

Question

一直试图让我的头脑以下问题。 我有以下代码：

function display() {
  fetch('../data/data.json').then((response) => {
    response.json().then((obj) => {
      // need to export obj.data somehow from here to be available in other files
    })
  })
}

HTML中有一个按钮，可以触发此代码，然后我需要能够从promise中检索数据并将其传递到其他文件，因此可以将其作为variable导入那里，以便Handlebars可以将其呈现为HTML。 我了解这是异步操作，并且我混合使用浏览器和节点，只是module.exports如何从这种情况下进行module.exports数据。 也许有更好的方法从本地.json获取数据并将其呈现为HTML？ 非常感谢！！！

Answer 1

您可以使用单例类存储数据以使其可访问。

Singleton.js

// To create the singleton behavior
let instance = null;

export default class Singleton {

  constructor() {
     if (instance) return instance;

     instance = this;

     return instance;
  }

  // To get the singleton object
  getInstance() {
     return instance || new Singleton();
  }

  storeVar(v) {
    this.v = v;
  }

  getVar() {
    return this.v;
  }
}

Display.js

import Singleton from 'Singleton.js';

function display() {
  fetch('../data/data.json').then((response) => {
    response.json().then((obj) => {
      // need to export obj.data somehow from here to be available in other files
      Singleton.getInstance().setVar(obj);
    })
  })
}

---

PS：因为这个原因，可以删除storeVar和getVar。v始终是公开的。 我把它放在这里，以便您了解它是如何工作的。

Answer 2

您可以导出由fetch返回的Promise对象，并将其导入将使用已解析响应的文件中。 像这样，

export function display() {
  return fetch('../data/data.json').then(response => response.json());
}

这将从当前文件中导出功能。 现在，当我们需要在其他文件中使用已解析的响应时，请首先将其导入

import { display } from '<relative_file_path_of_display_function>';

然后，您可以解析从display()函数返回的Promise ，例如，

display().then(jsonData => {
    // use the value here (referenced by `jsonData`)
})

您可以在上面的块中渲染模板并传递已解析的数据