Why does return return undefined?

Question

    function getLogin(){
        var login = new XMLHttpRequest();
        let res; // variable
        login.open('POST', 'assets/php/get_player.php', true);
        login.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        login.send();
        login.onreadystatechange = function() {
            if (login.readyState == 4) {
                if(login.status == 200) {
                    res = login.responseText; //Here the variable changes
                }
            }
        }
        return res
    }

    startbtn.forEach((button) => {
        button.addEventListener('click', (e) => {
            if (getLogin() == "true"){ // Here it gives undefined

            }else{
                alert("Вы не вошли в свой аккаунт!");
            }

        })
    });

The 'res' variable changes, but 'return' returns undefined Here is a code that does not work Here is a code that does not work

Duplicated https://stackoverflow.com/questions/6847697/how-to-return-value-from-an-asynchronous-callback-function — Lin Du, Jul 31 '23 at 07:38
Performing a request is asynchronous, but you are treating it as synchronous. — MustSeeMelons, Jul 31 '23 at 07:42

nick zoum · Accepted Answer · 2023-07-31T08:12:59.933

You are dealing with async actions, the response from the server will always be received after JavaScript is done executing the getLogin function. You should resolve the result and await for it (notice how the functions are now async)

async function getLogin() {
  return new Promise(function (resolve, reject) {
    var login = new XMLHttpRequest();
    login.open("POST", "assets/php/get_player.php", true);
    login.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    login.send();
    login.onreadystatechange = function () {
      if (login.readyState === 4) {
        if (login.status === 200) {
          resolve(login.responseText);
        } else {
          reject("Status is not ok");
        }
      }
    };
  });
}

startbtn.forEach((button) => {
  button.addEventListener("click", async (e) => {
    try {
      const loginResult = await getLogin();
      if (loginResult == "true") {
      } else {
        alert("Вы не вошли в свой аккаунт!");
      }
    } catch (err) {
      console.error("Error during login");
      console.error(err);
    }
  });
});

You can also use a sync request (though that's not recommended)

function getLogin() {
  var login = new XMLHttpRequest();
  let res;
  login.open("POST", "assets/php/get_player.php", false); // false = not async
  login.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  login.send();
  if (login.readyState === 4) {
    if (login.status === 200) {
      res = login.responseText;
    }
  }
  return res;
}

startbtn.forEach((button) => {
  button.addEventListener("click", (e) => {
    if (getLogin() === "true") {
    } else {
      alert("Вы не вошли в свой аккаунт!");
    }
  });
});

```js const startbtn = document.querySelectorAll(".start-game"); startbtn.forEach((button) => { button.addEventListener("click", async (e) => { const loginResult = await getLogin(); if (loginResult == "true") { } else { alert("Вы не вошли в свой аккаунт!"); } }); // Uncaught (in promise) }); ``` gives the following error — Poshlik, Jul 31 '23 at 08:08

Why does return return undefined?

1 Answers1