Почему функция возвращает undefined?

Question

[pandaa]

function getFile(url) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            return(xhr.responseText);
        }
    }
    xhr.open('GET', url);
    xhr.send();
}
var res = getFile(url);
console.log(res); //Вывело undefined.

Хотя в консоле (XHR) показывает файл успешно.

Answer 1

[v3shin]

Сама функция getFile() не возвращает никакого значения - внутри нее нет return. Return в асинхронном ajax-запросе возвращает значение "в никуда".
Если вы хотите как-то использовать ответ ajax-запроса, используйте сразу. Например,

xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText);
        document.getElementById('response').innerHTML = xhr.responseText;
        someOtherCallback(xhr.responseText);
    }
}

Answer 2

[Rsa97]

Потому что асинхронность. Функция getFile завершает свою работу сразу после отправки запроса на сервер. После получения ответа будет вызвана анонимная каллбэк-функция xhr.onreadystatechange, из которой возвращать данные бесполезно, их никто не ждёт.

Answer 3

[Владимир Мацуев]

Для того чтобы был не undefined, необходимо использовать промисы

function getFile(url) {
    return new Promise((resolve, reject) => {
      const xhr = new XMLHttpRequest();
      xhr.open("GET", url);
      xhr.onreadystatechange = () => resolve(xhr.responseText);
      xhr.onerror = () => reject(xhr.statusText);
      xhr.send();
    });
}

getFile(url).then((res) => {
  console.log(res);
});

Также может пригодится конструкция async await