Error handling when retrieving data from API

Igor Gryp 0
Viewed 25

With this function I get weather data from API. How can I handle errors that occur when searching with a name of a city that does not exist or enter blank? I'm trying with try/catch but it doesn't work :(

response.data.name - is the name of the location

const searchLocation = (event) => {
if (event.key === 'Enter') {
  try {
    axios.get(`https://api.openweathermap.org/data/2.5/weather? 
    &q=${location}&appid=${API_KEY}&units=${metric_units}`).then((response) => {
      if (response.data.name) {
        console.log(response.data.name)
        setData(response.data)
      }
      
      })
      setLocation('')
  } catch (e) {
    console.log(e.message)
  }
}

}

error-handling api reactjs javascript
1 Answers

You can do like this

const searchLocation = (event) => {
if (event.key === 'Enter') {
  axios.get(`https://api.openweathermap.org/data/2.5/weather? 
    &q=${location}&appid=${API_KEY}&units=${metric_units}`)
  .then(function (response) {
    if (response.data.name) {
        console.log(response.data.name)
        setData(response.data)
      }
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .finally(function () {  // final block is optional
    // always executed
  });
 }
}
Bahubali Ak0
Related