1

I want to rerender my React Component, once a POST-fetch has successfully performed. However when I console.log the execution times I notice that the order of execution is off. I am using the following code to get the time:

function getTime(input) {
  var date = input ? new Date(input) : new Date();
  return {
      hours : date.getHours(),
      minutes : date.getMinutes(),
      seconds : date.getSeconds(),
      milliseconds : date.getMilliseconds()
  }
}

In the main component I want to rerender after the fetch I am calling the following function, that is being imported from a seperate rest.js file:

fetchPushNewCourse(finalEvents).then(console.log("then 2 performed at", this.getTime()));

The function itself looks like that:

export async function fetchPushNewCourse(args){
  await fetch(`/calendar/post`, {
    method: "POST",
    body: JSON.stringify({ message: args }),
    headers: {
      "Content-Type": "application/json"
    }
  }).then(res => {
    console.log("then 1 performed at", getTime())
    return res.json();
  })
}

I want "then 2" only be console.logged after the fetch has been performed, however it always gets executed about one second earlier. I seem to have a basic misunderstanding how promises work.

leabum
  • 325
  • 1
  • 7
  • 23

1 Answers1

2

You are not passing lambda with console.log('then 2'), instead of it you are invoking it in the place of declaration.

It could be easily fixed: 

fetchPushNewCourse(finalEvents).then(() => console.log("then 2 performed at", this.getTime()));
mayakwd
  • 530
  • 3
  • 7