Why is it throwing undefined inside XMLHttpRequest?

Question

JavaScript

function get_manager(manager_id) {
    var xhr_one = new XMLHttpRequest();
    var name_manager = '';

    xhr_one.open('get', 'http://localhost:8000/get_managers?mid=' + manager_id + '&secure=' + localStorage.getItem('secure'), true);
    xhr_one.send();

    xhr_one.addEventListener('load', function () {
        name_manager = JSON.parse(xhr_one.response);

        return name_manager.fullname;
    });
}

Why does it return undefined? If you put return outside, then nothing is displayed at all

Answer 1

You can make the get_manager function return a promise:

function get_manager(manager_id) {
  return new Promise(function (resolve, reject) {
    var xhr_one = new XMLHttpRequest();
    var name_manager = '';

    xhr_one.open('get', 'http://localhost:8000/get_managers?mid=' + manager_id + '&secure=' + localStorage.getItem('secure'), true);
    xhr_one.send();

    xhr_one.addEventListener('load', function () {
        name_manager = JSON.parse(xhr_one.response);
        resolve(name_manager.fullname);
    });
    
    xhr_one.addEventListener('error', function () {
      reject({
        status: this.status,
        statusText: xhr_one.statusText
      });
    });
  }
}

call it like this:

get_manager(manager_id).then((name_manager) => {
  console.log(name_manager);
});

Answer 2

And where should return return the response if the function fires asynchronously, after the response from the server arrives?