Как переписать функцию с использованием Promise?

Question

[Алексей]

Начал учить async/await, на обычных задачках все выходит, решил написать pet проект, не выходит все связать воедино
Мне необходимо чтобы функция getCurrentWeather дождалась getCurrentPosition, и на основе её данных заполнила данные о широте и долготе

Так же у меня почему-то запросы к API вылетают сразу по 2 штуки

mounted() {
        this.getCurrentTime()
        this.getCurrentPosition()
        this.getCurrentWeather()
        setInterval(() => this.getCurrentWeather(), 2000)
    },


  methods: {
        getCurrentTime() {
            setInterval(() => {
                let currentDate = new Date()
                this.currentTime = [currentDate.getHours(), currentDate.getMinutes()].map(function (time) {
                    return time < 10 ? '0' + time : time
                }).join(":")
            }, 1000)

        },
        getCurrentWeather() {
                let ApiKey = 'КЛЮЧ'
                axios.get(`https://api.openweathermap.org/data/2.5/weather?lat=${this.lat}&lon=${this.long}&APPID=` + `${ApiKey}`)
                    .then(response => {
                        this.weather = response.data;
                        this.temp = response.data.main;
                        this.wind_speed = response.data.wind
                        this.sunrise = response.data.sys
                        this.sunset = response.data.sys
                    }).catch(error => {
                        console.log(new Error('Данные не получены, перезагрузите браузер'))
                    })

        },
        getCurrentPosition(){
            navigator.geolocation.getCurrentPosition(position => {
            this.lat = position.coords.latitude
            this.long = position.coords.longitude
        })
        },

Comments

[Tim]

Алексей, еще getCurrentWeather перепишите на async/await

Answer 1

[Виктор]

Привет, вижу решение проблемы тремя способами:
1) getCurrentPosition будет таким

getCurrentPosition () {
  return new Promise((resolve, reject) => {
    navigator.geolocation.getCurrentPosition(position => {
      resolve(position.coords)
    });
  })
}

а mounted таким

async mounted() {
        this.getCurrentTime()
        const coords = await this.getCurrentPosition()
        this.getCurrentWeather(coords)
        setInterval(() => this.getCurrentWeather(), 2000)
    },

если this.lat и this.long только нужны для вызова getCurrentWeather в mounted, то и незачем их класть в data
2) поставить watch this.lat и this.long и как только появится значение вызывать getCurrentWeather
3) Создать промис (new Promise) и resolve не вызывать сразу а поместить в переменную. Промис поместить в mounted, с await. А переменную с ссылкой на resolve вызвать в getCurrentPosition после того как получил координаты. Так как этот вариант не самый идеальный, код выкладывать не буду. Будет стимул поискать самому))

Comments

[Алексей]

Виктор отличный подход, реализую, спасибо за ответ!
Тогда по сути если я пойду по 1 варианту, то данные this.lat и this.long я могу через колбэк получить, верно?

[Александр]

Алексей, у вас в coords на строке `const coords = await this.getCurrentPosition()` будет объект с координатами, await заставит node.js дождаться ответа, что-то типа:

coords = {
   longitude: "XXX",
   latitude: "XXX"
}

[Виктор]

Алексей, Да в качестве параметров функции