When I access(for lack of a better term) the '/postUserInput' POST route, it either does not run getGeoNamesData() until the end, or it doesn't wait for the API fetch to finish. The data I get from this function is used for simultaneous API calls.
What should I do to make sure these functions run in order?
This is my server file code. It runs in this order according to the console:
first third fourth fifth sixth seventh eigth second
This keeps all my remaining API calls from having the correct data. Please help.
Thanks.
app.post('/postUserInput', function (req, res) {
currentWeatherUI = req.body.buildCurrentBoolean;
userInput = {
userCityInput: req.body.userCityInput,
userStateInput: req.body.userStateInput,
userDateInput: req.body.userDateInput,
};
console.log("first");
getGeoNamesData();
console.log("third");
if (currentWeatherUI) {
getCurrentWeatherbitData(longitude, latitude);
console.log("fifth");
} else {
getFutureWeatherbitData(longitude, latitude);
};
console.log("sixth");
getPixabayData();
console.log("eigth");
});
const getGeoNamesData = async () => {
try{
const response = await axios.get('http://api.geonames.org/searchJSON?q='+userInput.userCityInput+'+'+userInput.userStateInput+'&maxRows=1&username='+geonamesUser);
longitude = response.data.geonames[0].lng
latitude = response.data.geonames[0].lat
console.log("second");
} catch(error) {
console.log("error2", error);
};
};
const getCurrentWeatherbitData = async (longitude, latitude) => {
try {
const weatherbitURL = "http://api.weatherbit.io/v2.0/current?&lat="+latitude+"&lon="+longitude+"&key="+weatherbitUser+"&units=I&lang=en";
const response = await axios.get(weatherbitURL);
let newDayObject = {
city: response.data.data[0].city_name,
state: response.data.data[0].state_code,
date: userInput.userDateInput,
temp: response.data.data[0].temp,
wind: response.data.data[0].wind_spd,
windDirection: response.data.data[0].wind_cdir,
rain: response.data.data[0].precip,
snow: response.data.data[0].snow
};
projectDataArray.push(newDayObject);
console.log("fourth");
} catch(error) {
console.log("error", error);
};
};
const getPixabayData = async () => {
try {
const pixabayURL = "https://pixabay.com/api/?key="+pixabayUser+"&q="+userInput.userCityInput+"+"+userInput.userStateInput+"&image_type=photo&pretty=true&per_page=3";
const response = await axios.get(pixabayURL);
if (response.data.hits.length > 0) {
let cityImageObj = {cityImageURL: response.data.hits[0].webformatURL};
projectDataArray.push(cityImageObj);
} else {
let cityImageObj = {cityImageURL: "https://www.pennlive.com/resizer/vNu0aYjk3xlFTUb16FSrSji_DIA=/1280x0/smart/advancelocal-adapter-image-uploads.s3.amazonaws.com/image.pennlive.com/home/penn-media/width2048/img/life/photo/wintermeme11.jpg"};
projectDataArray.push(cityImageObj);
}
console.log("seventh");
} catch(error) {
console.log("error", error);
};
};```
Please check the MDN Docs for async functions in Javascript. According to the docs:
Async functions can contain zero or more await expressions. Await expressions make promise-returning functions behave as though they're synchronous by suspending execution until the returned promise is fulfilled or rejected.
This should run the functions - getGeoNamesData, getCurrentWeatherbitData getPixabayData in order that you expect.
app.post("/postUserInput", async function (req, res) {
currentWeatherUI = req.body.buildCurrentBoolean;
userInput = {
userCityInput: req.body.userCityInput,
userStateInput: req.body.userStateInput,
userDateInput: req.body.userDateInput,
};
console.log("first");
await getGeoNamesData();
console.log("third");
if (currentWeatherUI) {
await getCurrentWeatherbitData(longitude, latitude);
console.log("fifth");
} else {
await getFutureWeatherbitData(longitude, latitude);
}
console.log("sixth");
await getPixabayData();
console.log("eigth");
});