如果用户在天气 Api 搜索中输入了错误的城市名称，如何使用 try 和 catch？

Question

我希望在用户输入无效的城市名称时弹出警告。

尝试使用 if-else 和 try-catch 方法，但没有用。我正在使用天气 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

我不希望错误出现，而是使用错误来显示一条消息，说明用户输入无效。

整个代码link是https://github.com/Shefali-Upadhyay/weather-app

Answer 1

在这种情况下，您不需要 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("");
});

如果用户在天气 Api 搜索中输入了错误的城市名称，如何使用 try 和 catch？

How to use try and catch if the user enters wrong city name with an Weather Api search?

javascript

error-handling

weather-api