Блог

Главная - Вопросы по программированию - Как мне передать данные в объект класса в Javascript?

Как мне передать данные в объект класса в Javascript?

#javascript #ecmascript-6 #fetch #es6-promise #es6-class

#javascript #ecmascript-6 #выборка #es6-обещание #es6-класс

Вопрос:

У меня есть приложение погоды, которое я создаю для изучения классов ES6 и вызовов API с помощью Fetch. В настоящее время я передаю возвращенные данные из вызова fetch в weather.getWeather(pos) , определенным методам внутри вызываемого класса UI . Цель класса — манипулировать возвращаемыми данными в DOM.

Могу ли я передать data переменную в конструктор класса пользовательского интерфейса, чтобы я мог ссылаться на нее в своих методах класса пользовательского интерфейса?

Или лучше всего передавать данные только тем методам, которые их используют / нуждаются в этом?

 
//init weather and ui objects
const weather = new Weather();
const ui = new UI();

const form = document.getElementById("weather-form");
const loco = document.getElementById("location");

loco.addEventListener("click", () => {
    output.innerHTML = '';
    // Validation
    weather.validation(success, weather.error);
    
    function success(pos) {
        weather.getWeather(pos)
            .then(data => {
                ui.currentWeather(data);
                ui.forecast(data);
        })
        .catch(err => console.error(err));
    }
});


//2. Weather API Call

    async getWeather(pos) {
        const crd = pos.coords;

        let lat = crd.latitude;
        let long = crd.longitude;

        //Current weather
        let current = await fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${lat}amp;lon=${long}amp;appid=${this.key}amp;units=metric`);

        //Forecast
        let fiveDay = await fetch(`https://api.openweathermap.org/data/2.5/onecall?lat=${lat}amp;lon=${long}amp;exclude=${this.exclude}amp;appid=${this.key}amp;units=metric`)
        

        let now = await current.json();
        let forecast = await fiveDay.json();

        return {
            now,
            forecast
        }
    }

Комментарии:

1. Поскольку сейчас 2020 год, и вы используете ES6, почему бы не использовать async функции и await также? Это помогает свести к минимуму объем кода, который вам нужно написать.

2. Извините, мой вопрос не очень понятен. Я обновил, чтобы показать асинхронный вызов API.

3. Обычно вы передаете аргументы только тем функциям, которые их хотят, как будто вы не просто вызываете функцию с некоторыми вещами без причины. Что делает currentWeather и forecast хочет? Они берут объект и просто ищут определенные ключи? Им нужно несколько аргументов?

4. @tadman они просто берут data объект с now forecast объектами и, которые возвращаются из обещания. Затем я передал data объект в методы currentWeather and forecast . Это был единственный способ, которым я мог понять, как получить эту информацию для этих методов. Мне просто интересно, проще ли передать объект данных в конструктор класса пользовательского интерфейса, а затем ссылаться на объект данных как this.data = data . У меня есть несколько переменных, которые используют объект данных, которые, я думаю, очистили бы код, если бы они были в конструкторе. Я не уверен.

5. Если вы полагаетесь на несколько методов в вашем классе пользовательского data интерфейса, вы можете использовать сеттер, такой как .setData() , который затем установит атрибут data в вашем классе (вместо того, чтобы передавать его в конструктор)

Метки: