Post not carrying out when called in a onclick event handler

Question

I made a program just for fun updating user emails
I make a function which i have tried to place inside event handler outside tried everywhere, that function has a post request and it returns true if it got a response and false if it catches a error

I am trying to do a while loop but it doesn't carry out tasks. I got it working once but don't know how

The important part is where checkCookieValid is a function it accepts paramaters cookie, username and it sends a post request, sends the cookie and username in a object then if it gets a response it sets the function to return true I suppose and if it catches error, false then outside of it I try to as you know use the while loop but its not running the code inside?

var checkCookieValid = (cookie, username) => {
  axios
    .post(
      "http://localhost:3000/sendCookielist", {
        cookie: cookie,
        username: username
      }, {
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json",
        },
      },
    )

    .then((response) => {
      if (response) {
        console.log(response.data);
        return true;
      }
    })
    .catch((err) => {
      if (err.response) {
        console.log(err.response);

        return false;
      }
    });
};
while (checkCookieValid(Data.current.cookie, Data.current.username) === false) {
  console.log("helo");
}

Answer 1

The problem is likely that you are expecting the function "checkCookieValid" to be executed synchronously but it is actually asynchronous.

var checkCookieValid = (cookie, username) => {
  // the function will return (undefined) before axios.post has finished executing
  axios.post( ... )
  ...

You need to use either async and await, return a Promise or use a callback mechanism.

Using a Promise could work like this:

var checkCookieValid = (cookie, username) => new Promise((resolve) => {
  axios
    .post( ... )
    .then((response) => {
      if (response) {
        console.log(response.data);
        // return will not work here
        resolve(true);
      }
    })
    .catch((err) => {
      if (err.response) {
        console.log(err.response);
        // same here
        resolve(false);
      }
    });
})

Then you need either an async environment:

async function main () {
  // with a loop
  var isValid = false;
  do {
    const isValid = await checkCookieValid(Data.current.cookie, Data.current.username);
  } while (isValid === false)
  
  // or without a loop
  const isValid = await checkCookieValid(Data.current.cookie, Data.current.username);
  if (isValid === false) { ... }
}

or you can use then (without a loop):

checkCookieValid(Data.current.cookie, Data.current.username)
  .then(isValid => { ... })