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所以{{ 1}}可以将其呈现为HTML。我明白这是异步操作，我混合浏览器和节点只是不知道如何从这种情况Handlebars数据..请指教。也许有更好的方法从本地.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：因为this.v无论如何都可以删除storeVar和getVar。我把它放在这里，这样你就可以理解它是如何工作的。

Answer 2

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

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

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

import { display } from '<relative_file_path_of_display_function>';

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

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

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

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

2 个答案: