Как использовать попробовать и поймать, если пользователь вводит неправильное название города с поиском Weather Api? - PullRequest
Новая
       11

Как использовать попробовать и поймать, если пользователь вводит неправильное название города с поиском Weather Api?

1 голос
/ 24 мая 2019

Я хочу всплывающее уведомление, когда пользователь вводит неверное название города.

Попытка с использованием метода if-else и try-catch, но не работает.Я использую Weather API для получения погоды и температуры. 

const getWeather = () => {
  let cityName = $("#cityName").val();
  let apiCall = `http://api.openweathermap.org/data/2.5/weather?q=${cityName}&mode=json&units=metric&appid=${
    CONSTANTS.appId
  }`;
  $.getJSON(apiCall, weatherData => {
    let cityName = weatherData.name;
    let countryName = weatherData.sys.country;
    let description = weatherData.weather[0].description;
    let tempMin = weatherData.main.temp_min;
    let tempMax = weatherData.main.temp_max;
    $("#city").text(cityName);
    $("#detail").text(description);
    $("#country").text(countryName);
    $("#mintemp").html(`Minimum: ${tempMin}<span>&#8451;</span>`);
    $("#maxtemp").html(`Maximum: ${tempMax}<span>&#8451;</span>`);
  });
};

Всякий раз, когда вводится неверный ввод, я получаю это сообщение в консоли. 

GET http://api.openweathermap.org/data/2.5/weather?q=sdx&mode=json&units=metric&appid=d568dc579415266146ede4b4f9de029b 404 (Not Found)    
jquery-3.4.1.js:9837

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

вся ссылка на код https://github.com/Shefali-Upadhyay/weather-app

1 Ответ

0 голосов
/ 24 мая 2019

В этом случае вам не нужен блок try...catch, поскольку jQuery обрабатывает все за вас, но вам нужно найти код состояния HTTP. Не используйте $.getJSON(), вместо этого используйте $.ajax().

Если вы все еще хотите использовать $.getJSON(), вы можете использовать .fail() цепной метод следующим образом: 

let cityName = $("#cityName").val();
let apiCall = `http://api.openweathermap.org/data/2.5/weather?q=${cityName}&mode=json&units=metric&appid=${CONSTANTS.appId}`;

$.getJSON(apiCall, weatherData => {
  let cityName = weatherData.name;
  let countryName = weatherData.sys.country;
  let description = weatherData.weather[0].description;
  let tempMin = weatherData.main.temp_min;
  let tempMax = weatherData.main.temp_max;
  $("#city").text(cityName);
  $("#detail").text(description);
  $("#country").text(countryName);
  $("#mintemp").html(`Minimum: ${tempMin}<span>&#8451;</span>`);
  $("#maxtemp").html(`Maximum: ${tempMax}<span>&#8451;</span>`);
}).fail(() => {
  alert("City doesn't Exist!!");
  $("#cityName").val("");
  $("#city").text("");
  $("#detail").text("");
  $("#country").text("");
  $("#mintemp").html("");
  $("#maxtemp").html("");
});
...