Где здесь ошибка?

Question

[Ch cgtj Hihf]

У меня есть такой код:

function smileTXT(smileID){
//Получаю данные из сервера
  var xhr = new XMLHttpRequest()
  var smileResourc = '';
  xhr.open(
    'GET',
    'https://run.mocky.io/v3/1836c242-5495-4d76-b46d-747516f5a9c7',
    true
  )
  xhr.send()
  
  xhr.onreadystatechange = function() {
    if (xhr.readyState != 4) {
      return
    }
  
    if (xhr.status === 200) {
//Конвертируем строку в json
      smileResourc = JSON.parse(xhr.responseText);
    } else {
      console.log('err', xhr.responseText)
    }
  }
//Проверяю на наличие нужного ключа *id* 
  if (typeof smileResourc[smileID] !== "undefined") {
//Если есть то
    return smileResourc[smileID];
  } else {
//Если нету то
    var error = 'ID was not found, check if the ID was entered correctly';
    console.log(error);
  }
}

Но вот проблема проверка проходит и выводить undefined а потом переменную error.
Три часа искал где здесь ошибка так и не нашел...
Где здесь ошибка?

Answer 1

[Сергей delphinpro]

ваш код отрабатывает сразу

var xhr = new XMLHttpRequest()
var smileResourc = '';
xhr.open(...)
xhr.send()
xhr.onreadystatechange = ...

// Строки выше отработаны и сразу же начинается выполнение условий !!!
if (typeof smileResourc[smileID] !== "undefined") {
  return smileResourc[smileID];
} else {
  var error = 'ID was not found, check if the ID was entered correctly';
  console.log(error);
}

НО! запрос еще не завершён и переменная smileResourc не установлена. Запрос будет завершён позже.

А - Асинхронность.

Всю работу с этой переменной следует производить внутри коллбэка onreadystatechange.
Для передачи результата во вне тоже можно использовать свой коллбэк

function smileTXT(smileID, callback){
  // ...
  xhr.onreadystatechange = function() {
    if (xhr.readyState != 4) {
      return
    }
  
    if (xhr.status === 200) {
      smileResourc = JSON.parse(xhr.responseText);
      callback(smileResourc);
    } else {
      console.log('err', xhr.responseText)
    }
  }
}

smileTXT('smileID', function(smileResourc){
  console.log(smileResourc); // <- Вот он
  if (typeof smileResourc[smileID] !== "undefined") {
    // Что-то делаем с smileResourc[smileID];
  } else {
    var error = 'ID was not found, check if the ID was entered correctly';
    console.log(error);
  }
});