javascript выборка api шаблон строки

Question

Я пытаюсь создать приложение, которое сообщит вам погоду в зависимости от вашего местоположения. Я получаю местоположение с помощью ipinfo, и оно работает. Я помещаю местоположение в переменную, и когда я консольный журнал это все еще работает. Но когда я пытаюсь извлечь данные из openweathermap с этой переменной, используя строку шаблона, это то, что показывает консоль: Uncaught (в обещании) ReferenceError: currentCity не определено в getWeather Проблема в том, что когда я копирую эту ссылку на консоль, она возвращает работающую ссылку! Спасибо за помощь

    const getLocation = async () => {
        const response = await fetch('http://ipinfo.io/json?token=(id given by ipinfo)')

        if (response.status === 200) {
            const data = await response.json()
            return data.city
        } else {
            throw new Error('Unable to get the current location')
        }
    }

    let currentCity


    getLocation().then((city) => {
        currentCity = city
        document.write(currentCity)
    }).catch((err) => {
        // Do something with it later
    })


    const getWeather = async () => {
        const response = await 
        fetch(`http://api.openweathermap.org/data/2.5/forecast?q=${currentCity}&units=metric&id=524901&APPID=(id given by openweathermap)`);

        if (response.status === 200) {
            const data = await response.json()
            return data
        } else {
            throw new Error("Unable to get weather")
        }
    }

    getWeather().then((data) => {
        console.log(data)
    })

Answer 1

Существует два асинхронных вызова, один из них getLocation () , а другой - getWeather () .

В соответствии с текущим кодом они оба работают асинхронно, без определения потока последовательности.

Вам нужно синхронизировать оба из них так, чтобы первое местоположение выбиралось после того, как погода для этого местоположения была выбрана.

Ниже приведен способ синхронизации двух методов для выполнения одного за другим.

const getLocation = async() => {
  const response = await fetch('http://ipinfo.io/json?token=(id given by ipinfo)')

  if (response.status === 200) {
    const data = await response.json()
    return data.city
  } else {
    throw new Error('Unable to get the current location')
  }
}


const getWeather = async(currentCity) => {
  const response = await
  fetch(`http://api.openweathermap.org/data/2.5/forecast?q=${currentCity}&units=metric&id=524901&APPID=(id given by openweathermap)`);

  if (response.status === 200) {
    const data = await response.json()
    return data
  } else {
    throw new Error("Unable to get weather")
  }
}



getLocation().then((city) => {
  currentCity = city;
  document.write(currentCity);
  return city;
}).then((city) => {
  return getWeather(city);
}).then((data) => {
  console.log(data)
}).catch((err) => {
  // Do something with it later
})

Путем объединения обещаний, как показано ниже, это достигается. Также изменил метод getWeather (), чтобы он принимал расположение в качестве параметра, чтобы сделать его повторно используемым модулем.

getLocation().then((city) => {
  currentCity = city;
  document.write(currentCity);
  return city;
}).then((city) => {
  return getWeather(city);
}).then((data) => {
  console.log(data)
}).catch((err) => {
  // Do something with it later
})