Что не так в этом куске кода на js с ajax запросом через axios?

Question

Данный код должен отправлять запрос на сервер и получать объект в котором response.data - массив из чисел. В первом случае (console.log(dataChart)) нормально выводится массив в консоль, во втором выводится undefined. Что сделать шоб оно нормально работало?

var dataChart;
        axios.get('https://xxxxxxxx.xx/handle.php?method=getStat')
            .then(function (response){
                console.log(response);
                dataChart = response.data;
                console.log(dataChart); //N1! здесь нормально выводит массив
            })
            .catch(function (error) {
              // handle error
              console.log(error);
            })
            .then(function () {
              // always executed
            });
            console.log(dataChart); //N2! undefined

Answer 1

Анонимная функция у Вас в коде:

function (response){
    console.log(response);
    dataChart = response.data;
    console.log(dataChart); //N1! здесь нормально выводит массив
}

асинхронная(их еще называют колбеками callback), вызов .then(...) не приводит к выполнению переданной туда функции, а где-то внутри сохраняет ссылку на нее, чтобы вызвать её потом, когда настанет время(когда загрузится ресурс по сети).

а идущий последней строчкой console.log() выполняется в обычном порядке. то есть сразу после выражения над ним.