Как передать переменные в другие JS модули с помощью Fetch API? - PullRequest
Новая
       8

Как передать переменные в другие JS модули с помощью Fetch API?

0 голосов
/ 19 февраля 2020

Приложение JavaScript использует API-интерфейс Web Audio для создания звуков из данных JSON. Я выбираю данные о погоде, просматриваю данные JSON и устанавливаю их свойства в переменные, а затем использую эти переменные для управления моим приложением и создания звуков. Каждая функция в своем собственном JavaScript файле скрипта модуля. main.js, не показанный здесь, является точкой входа в приложение.

Образец JSON, который будет заменен данными о реальной погоде.

фиктивные данные. json 

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

Logi API выборки c.

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

Ответы [ 3 ]

0 голосов
/ 19 февраля 2020

Вы можете добиться этого, преобразовав свои обещания в асинхронный / ожидающий шаблон, а затем вернув результат (другой метод работы с обещаниями). Кроме того, ваша функция createSynth должна вызывать fetchWeather, а не manageScript

dummy-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();
0 голосов
/ 19 февраля 2020 
// 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 }
0 голосов
/ 19 февраля 2020

Вы можете добавить 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() {
  // ...
  return this;
}

makeSynth. js

let soundOfRain = manageData().data.rainProbability;
...