关于javascript promise有点困惑

Question

我正在尝试使我的代码使用诺言。

读取和播放后，尝试在“ githubUserData”对象中设置一些属性，从而创建了随后的代码。Promise似乎正在运行，但“ githubUserData”返回{}（空）

显然，如我的控制台日志所示，我的代码未按期望的顺序执行。它在设置属性之前显示该对象。

    console.clear();
    console.log( '>>>>>> Starting promise..' );

    // Create object to keep requested data
    let githubUserData = {};

    function getGithubUserData() {
        // Promise
        return new Promise( ( resolve, reject ) => {
            $.ajax({
                url: 'https://api.github.com/users/codepen',
                data: {},
                success: function( data ) {
                    resolve( data ); // Resolve promise and go to then()
                },
                error: function( err ) {
                    reject( err ); // Reject the promise and go to catch()
                }
            });
        });
    };

    getGithubUserData().then( data => {
      // Promise request was successful
      console.log( '>>>>>> Data: ', data);
      console.log( '>>>>>> Data loaded: ' + data.id + ', ' + data.name + ', ' + data.type + ', ' + data.blog );
      githubUserData = {...data};
    }).catch( err => {
      // Promise rejected via reject()
      console.log( err );
    })

    console.log('>>>>>> Promise end. Data saved: ', githubUserData);

代码笔为此..
https://codepen.io/snart1/pen/KOXbNr?editors=0012

我在这里做错了什么？

如何不按以下顺序执行我的代码

1. >>>>>>开始承诺
2. >>>>>>承诺结束。保存的数据：对象{}
3. >>>>>>加载的数据：1545643，CodePen，组织机构，http：//codepen.io

但这（在对象中具有数据）

1. >>>>>>开始承诺
2. >>>>>>加载的数据：1545643，CodePen，组织，http：//codepen.io  
3. >>>>>>承诺结束。保存的数据：对象{ 数据在此处 }

PS。我更喜欢JavaScript解决方案，而不是jQuery。

更新 我也尝试了异步/等待，但是得到了相同的结果（此代码更接近我的目标）。

console.clear();
console.log( '>>>>>> Starting promise..' );

// Create object to keep requested data
let githubUserData = {};

async function getGithubUserData() {
    var xhr = new XMLHttpRequest();
    // Promise
    return new Promise( ( resolve, reject ) => {
       xhr.onreadystatechange = function() {
            if ( xhr.readyState == 4 ) {
                if ( xhr.status >= 300 ) {
                    reject( "Error, status code = " + xhr.status );
                } else {
                    resolve( JSON.parse( xhr.responseText ) );
                }
            }
        }
        xhr.open( 'get', 'https://api.github.com/users/codepen', true );
        xhr.send();
    });
}
async function logUserData() {
    try {
        let data = await getGithubUserData();
        console.log( '>>>>>> Data loaded: ' + data.id + ', ' + data.name + ', ' + data.type + ', ' + data.blog );
        githubUserData = {...data};
    } catch ( err ) {
       console.log( err );
    }
}
logUserData();

// My goal is to have githubUserData loaded with data here !!!!
console.log( '>>>>>> Promise end. Data saved: ', githubUserData );

用于异步/等待的Codepen笔
https://codepen.io/snart1/pen/ymzQvK?editors=0012

有什么办法可以在这里保存数据，console.log（'>>>>>> Promise end。数据保存：'，githubUserData）;
不在getGithubUserData调用内部，但是之后？有什么办法可以保持脚本的执行，直到那里没有数据？
那是我的目标，在那里获取数据。

Answer 1

因为您在then执行之前先进行记录。finally像这样使用。

getGithubUserData().then(...).catch(...).finally(() => {
  console.log(githubUserData);
});

在实际记录变量之后，正在运行将数据分配给变量的异步代码。

finally 用于，因此无论是否引起错误，您都可以看到输出。