Приложение погоды на JavaScript: API, поиск города и состояния интерфейса

Погодный виджет лучше начать с API без секретного ключа и трёх явных состояний: загрузка, результат, ошибка. Вы превратите название города в координаты, запросите текущую температуру и не оставите пользователя перед пустой карточкой.

Запрос погоды состоит из двух шагов. Сначала геокодер ищет координаты по строке, затем прогноз использует широту и долготу. Такое разделение полезно: погода не обязана понимать, что означает «Казань», ей нужны числа.

Как устроен запрос погоды

Для учебного проекта используем Open-Meteo: отдельный геокодер и forecast endpoint. AbortController отменит предыдущий поиск, если пользователь быстро отправит новую форму. response.ok проверяется до response.json.

После этого шага у каждой части есть одна роль. Интерфейс собирает действие, логика меняет состояние, а вывод показывает признак успеха. Это проще отлаживать, чем один большой обработчик.

Город сначала становится координатами. Новый поиск отменяет предыдущую цепочку

Пишем два fetch и обновление карточки

Функция requestJSON проверяет HTTP-статус. encodeURIComponent защищает query-параметр от пробелов и специальных символов. Ошибка AbortError не показывается пользователю: она означает, что её заменил более свежий запрос.

let controller;
async function requestJSON(url, signal){
  const response=await fetch(url,{signal});
  if(!response.ok) throw new Error('HTTP ' + response.status);
  return response.json();
}
async function loadWeather(city){
  controller?.abort(); controller=new AbortController();
  showStatus('Загружаем…');
  try{
    const geo=await requestJSON(
      'https://geocoding-api.open-meteo.com/v1/search?name=' + encodeURIComponent(city) + '&count=1&language=ru',
      controller.signal
    );
    const place=geo.results?.[0];
    if(!place) throw new Error('Город не найден');
    const weather=await requestJSON(
      'https://api.open-meteo.com/v1/forecast?latitude=' + place.latitude + '&longitude=' + place.longitude + '&current=temperature_2m,wind_speed_10m&timezone=auto',
      controller.signal
    );
    showWeather(place.name,weather.current);
  }catch(error){
    if(error.name!=='AbortError') showStatus(error.message==='Город не найден'?error.message:'Не удалось загрузить погоду');
  }
}

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

Почему API-ключ нельзя спрятать во frontend

API-ключ, записанный в JavaScript браузера, увидит любой посетитель в исходниках и Network. Ограничения домена уменьшают риск, но не превращают ключ в секрет. Для платного или привилегированного API запрос нужно проводить через собственный backend.

Сохраняйте в одном месте то, что может измениться. Если одно и то же значение скопировано в три функции, после первой правки они начнут расходиться. Один объект состояния и одна функция отрисовки снимают эту проблему.

Практика: проверяем ошибки и быстрый поиск

Проверьте нормальный город, строку с опечаткой, пустой ввод и отключённую сеть. Затем быстро отправьте два разных города. На экране должен остаться результат последнего запроса, а не того, который случайно ответил позже. Посмотрите ответ API в Network и сверьте единицы измерения. Не добавляйте знак градуса или скорость ветра по памяти, если сервис уже прислал точную подпись. Повторите поиск города с одинаковым названием в разных странах. Если интерфейс показывает только первое совпадение, добавьте страну или регион в подпись, чтобы пользователь понимал, какие координаты выбраны.

Пустого экрана быть не должно. Пройдите все четыре сценария перед публикацией проекта.

Доводим погодный виджет до готового состояния

После текущей погоды добавьте прогноз на три дня и сохранение последнего города. Перед этим вынесите преобразование weather code в отдельную функцию и протестируйте неизвестный код. Интерфейс не должен зависеть от идеального ответа API.

Что получится в итоге

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