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

Question

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

示例 JSON 将替换为真实天气数据。

虚拟-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 的属性，这将 return 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() {
  // ...
  return this;
}

makeSynth.js

let soundOfRain = manageData().data.rainProbability;

Answer 2

您可以通过将承诺重构为 async/await 模式然后返回结果（另一种处理承诺的方法）来实现此目的。另外 - 您的 createSynth 函数应该调用 fetchWeather，而不是 manageScript

虚拟-data.json

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

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;
}

export { manageData };

fetchWeather.js

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

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

// Use async/await to be able to return a variable out from the promise
const fetchWeather = async () => {
    const raw = await fetch(DUMMY);
    const json_data = await raw.json();
    const rain = manageData(json_data);
    // Now you should be able to return the variable back out of the function
    return rain;
};

export { fetchWeather };

makeSynth.js

import { fetchWeather } from "./fetchWeather.js";

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

    //Need to call fetchWeather (which in turn will call manageData)
    let soundOfRain = await fetchWeather();
    console.log(soundOfRain);
};

createSynth();

Answer 3

// dummy-data.json

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

// fetchWeather.js

import { getRainProbability } from './get-rain-probability.js'
import { createSynth } from './create-synth.js'

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

const fetchWeather = () => {
    return fetch(DUMMY)
        .then((res) => res.json())
        .then((data) => {
            createSynth({ rainProbability: getRainProbability(data) })
        })
        .catch((error) => {
            console.log(error)
        });
};

export { fetchWeather }

// get-rain-probability.js

function getRainProbability(data) {
    let rain = data.weather.rain

    let rainProbability;

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

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


// create-synth.js

const createSynth = ({ rainProbability }) => {
    const soundOfRain = //WebAPI stuff for audio using `rainProbability`
    console.log(soundOfRain);
};

export { createSynth }

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

How do you pass variables to other JS modules with Fetch API?

javascript

fetch-api

es6-modules