Почему я не могу передать ответ ajax глобальной переменной javascript?

Question

Мне нужно передать массив php в переменную javascript, я обнаружил, что для этого используется ajax.Проблема в том, что я могу передать ответ ajax только переменной внутри функции, но не глобально.

Я попытался сделать это несколькими способами, например, callback, async / await, обещание / затем, но ни один из них не сработал.

Вот один из тех кодов, которые я пробовал.

<script>
  var data;
  function ajaxF() {
    return new Promise(function(resolve) {
      var ajax = new XMLHttpRequest();
      ajax.onload = function() {
        var res = JSON.parse(ajax.responseText);
        resolve(res);
      };
      ajax.open("POST", "data.php", true);
      ajax.send();
    });
  }
  ajaxF().then(function(result){
    data = result;
    console.log(data);
  }).catch(function (e) {
    console.log("Error:", e);
  });
  console.log(data);
</script>

Я хочу, чтобы ответ ajax передавался в глобальную переменную javascript data, но почему-то это просто невозможно.

Что меня больше всего смутило, так это то, почему в первом журнале консоли data имеет правильное значение, а второе все еще не определено?Если data в первом журнале консоли имеет правильное значение, не означает ли это, что ответ ajax уже передан в переменную data, тогда почему во втором журнале консоли выводится неопределенное значение?

Что я делаюздесь не так?