对 javascript Promise 有点困惑

Question

我正在尝试使用 Promise 使我的代码正常工作。

阅读和播放，创建了以下代码的平静，试图在“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);

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

我在这里做错了什么？

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

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

但是这个（对象中有数据）

1.>>>>>>开始承诺.. 2. >>>>>> 数据加载：1545643，CodePen，Organization，http://codepen.io 3. >>>>>> 承诺结束。数据保存：对象 { data here }

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

更新 我也尝试了 async/await，但得到了相同的结果（这段代码更接近我的目标）。

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 pen
https://codepen.io/snart1/pen/ymzQvK?editors=0012

这里有什么办法可以有数据，console.log('>>>>>> Promise end. Data saved: ', githubUserData);
不在 getGithubUserData 调用内部，而是在之后？有没有办法让脚本执行直到那里有数据？
这是我的目标，在那里获取数据..

Answer 1

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

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

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

使用finally，因此无论是否导致错误，您都可以看到输出。