Почему модуль JS возвращает undefined вместо строки?

Question

[Sergey Nikolaev]

При использовании модуля, если return стоит перед созданием xhr, то все работает отлично, модуль возвращает указанный результат. Если return стоит в операторных скобках else после проверки условия if (xhr.status != 200), возвращает undefined. В консоль выводит пришедшее значение с файла read.php (данные с сервера приходят типа string).

export function getData(type, table) {
  //return 'Name Site';
  let xhr = new XMLHttpRequest();
  xhr.open("POST", "crud/read.php", true);
  xhr.setRequestHeader(
    "Content-Type",
    "application/x-www-form-urlencoded"
  );

  xhr.send(
    "type=" +
    type +
    "&table=" +
    table
  );

  xhr.onreadystatechange = function () {
    if (xhr.readyState != 4) return;
    // Если есть ошибка, оповещаем об этом пользователя
    if (xhr.status != 200) {
      console.log("Errr " + xhr.status + ": " + xhr.statusText);
    } else {
      return xhr.responseText;
      //console.log(xhr.responseText);
    }
  };
}

Comments

[Сергей delphinpro]

Её Величество Асинхронность =)

[Sergey Nikolaev]

Сергей delphinpro, Благодарствую сердешно за пример!

[Сергей delphinpro]

Sergey Nikolaev, Пример отсюда https://developer.mozilla.org/ru/docs/Web/JavaScri...
Там еще много интересного и полезного

Answer 1

[Сергей delphinpro]

function getData() {
  //...
  return new Promise((resolve, reject) => {
    xhr.onreadystatechange = function () {
        if (xhr.readyState != 4) reject(xhr.statusText);
        if (xhr.status != 200) {
          reject(xhr.statusText);
        } else {
          resolve(xhr.responseText);
        }
    };
    xhr.send();
  });
}

// use

getData()
  .then(function(response){
    console.log('Its OK', response);
  })
  .catch(function(errorText){
    console.log('Error:', errorText);
  });

Answer 2

[Владимир Проскурин]

Ну так метод onreadystatechange асинхронный, т.е. он выполнится уже после вашего return. Поэтому используйте промисы, callback или async/await