对 javascript promise 有点困惑

Question

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

阅读和播放，创建了随后的和平代码，试图在 "githubUserData" 对象中设置一些属性。 Promise 似乎有效，但 "githubUserData" returns {}（空）

很明显，正如我的控制台日志所显示的，我的代码没有按照预期的顺序执行。它在他的属性设置之前显示对象..

    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. >>>>>> Starting promise..
2. >>>>>> Promise end. Data saved:  Object {}
3. >>>>>> Data loaded: 1545643, CodePen, Organization, http://codepen.io

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

1. >>>>>> Starting promise..
2. >>>>>> Data loaded: 1545643, CodePen, Organization, http://codepen.io  
3. >>>>>> Promise end. Data saved: Object { 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 笔 async/wait
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 以便无论是否导致错误都可以看到输出。

对 javascript promise 有点困惑

A little bit confused about javascript promise

javascript

object

promise

ecmascript-6

es6-promise