Scope
React Weather app is a responsive web app that uses OpenWeatherMap's API. This was the first project where I used axios. The reason why I used axios over fetch() was to narrow down the steps, and axios cuts the step of passing a request to a .json() method; returning only an object.
Technologies Used
- React
- Sass
- OpenWeatherMap API
Development
In the following code snippet, I used the try and catch error handling for axios to fetch the OpenWeatherMap's API error
const fetchForecast = async ( query ) => {
const forecast = `https://cors-anywhere.herokuapp.com/http://api.openweathermap.org/data/2.5/forecast?q=${query}&APPID=${API_KEY}&units=metric`;
// Get the response once a call is being made to forecast with the API
try {
const { data } = await axios.get(forecast, {
params: {
q: query,
APPID: API_KEY,
}
})
return data;
}
catch(error) {
let responseData = '';
if(error) {
responseData = "Oops! Unable to find city, please try again!";
setError(responseData);
} else if (error.request) {
responseData = "Oops! Unable to find city, please try again!";
setError(responseData);
} else {
responseData = "Oops! Unable to find city, please try again!";
setError(responseData);
}
return error;
};
}