Resolved: How to call POST route functions to fetch API data in order (JS)?

Question:

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);
  }; 
};```

Answer:

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");
});

If you have better answer, please add a comment about this, thank you!

Resolved: How to call POST route functions to fetch API data in order (JS)?

Resolved: How to give rank on datetime column group by another column with userid in it

Resolved: Passing 2 functions in onChange in react

Resolved: Why doesn’t stringstream consume output during hex formatting?

Leave A Reply