как вернуть значение из функции XMLHttpRequest() (запрос к файлу PHP)

У меня есть функция в которой я получаю нужные мне данные и вижу их в консоле, все отлично работает:

function getData(file, id) {
    let xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (this.readyState==4 && this.status==200) {
            console.log(this.responseText);
        }
    }
    xmlhttp.open("POST", file, true);
    xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xmlhttp.send("user_id=" + id);
}
getData("user.php", 1);

Я хочу сделать так, что бы функция возвращала this.responseText, поэтому я дописал функцию вот так:

function getData(file, id) {
    let str;
    let xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (this.readyState==4 && this.status==200) {
            srt = this.responseText;
        }
    }
    xmlhttp.open("POST", file, true);
    xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xmlhttp.send("user_id=" + id);

    return str;
}
let data = getData("user.php", 1);
console.log(data);

В консоле я получаю "undefined". Почему так происходит?