如何通过Fetch API将变量传递给其他JS模块？

Question

JavaScript应用程序使用Web Audio API从JSON数据创建声音。我正在获取天气数据，遍历JSON数据并将其属性设置为变量，然后使用这些变量来操纵我的应用程序并创建声音。每个函数在其自己的JavaScript模块脚本文件中。 [此处未显示的main.js是应用程序的入口点。

将被实际天气数据替换的示例JSON。

dummy-data.json

{
    "weather": {
        "temp": 4,
        "rain": 1,
        "wind": 1.2
    }
}

获取API逻辑。

fetchWeather.js

import { manageData} from './manageScript.js';

const DUMMY = '../dummy-data.json';

const fetchWeather = () => {
    fetch(DUMMY)
        .then((res) => {
            return res.json();
        })
        .then((data) => {
            manageData(data); // attaches JSON weather properties to variables
        })
        .catch((error) => {
            console.log(error);
        });
};

export { fetchWeather };

将JSON数据附加到变量。

manageScript.js

function manageData(data) {
    let rain = data.weather.rain;
    //let wind = data.weather.wind;

    let rainProbability;

    if (rain == 1) {
        rainProbability = 1;
    }
    else {
        rainProbability = 0;
    }

    return rainProbability; // not sure how to return the data....?
};

export { manageData };

我希望上面的manageData函数中的变量在这里工作

makeSynth.js

import { manageData } from './manageScript.js';

const createSynth = () => {
    //Web Audio API stuff goes here to create sounds from the variables.

    //How do I get the variables to work here. Code below does not work!
    let soundOfRain = manageData().rainProbability;
    console.log(soundOfRain);
};

Answer 1

您可以将data添加为manageData的属性，该属性将返回this，并使用manageData().data;进行访问：

fetchWeather.js

const fetchWeather = () => {
  fetch(DUMMY)
    .then(res => {
      return res.json();
    })
    .then(data => {
      manageData.data = data; // attaches JSON weather properties to variables
    })
    .catch(error => {
      console.log(error);
    });
};

manageScript.js

function manageData(data) {
  // ...
  return this;
}

makeSynth.js

let soundOfRain = manageData().data.rainProbability;