javascript - 将 api 响应推送到 .map() 中的全局变量以某种方式使数据无法访问

Question

我创建了一个函数，它通过像这样的 Promise 进行一系列 API 调用

//userApiList is a variable with an array of links
return Promise.all(userApiList.map(url =>{
    var a = $.getJSON(url);
    //userData is a global variable
    userData.push(a);
    return a;
}));

我既想将数据保存到一个变量供以后使用，又想立即返回它以便用 jquery 迭代到 html 中。一切都按预期完美加载，但是当我访问变量中的数据时，我得到了所有“未定义”属性。我 console.logged 变量，它显示数据在那里，我在获取数据后很好地单击按钮，所以这不是异步问题。这是其中一个功能的示例

$("#load_online").click(function(){
    var users = [];

    for(var i = 0; i < userData.length; i++){
      var status = userData[i].status;
      if(status !== null || status !== undefined){ users.push(userData[i]); }
    }
    $("#result_frame").empty();
    //loadUsers() iterates the data into html
    loadUsers(users);
});

我尝试了 console.log(userData[i].status) 只是为了看看结果是什么，当它应该是时，我得到了 200 作为响应null' 或 channel 上正在播放的剧集的标题。

问题是我认为 responseJSON: 字段总是返回使用，因为我以前从未涉及过这个问题。这次似乎正在读取整个对象，因此 userData[i].status 正在读取上一层的 status: 属性，而不是在 responseJSON: 对象。我尝试考虑从 userData[i].responseJSON.status 中获取响应，并为每个对象返回 undefined。有人很容易看到我做错了什么吗？这是一个CodePen如果您需要更仔细地了解事物，请查看整个项目。

Answer 1

您不是将数据推送到您的数组中，而是将一个 jQuery jqXHR 对象(thenable，例如，类似 Promise)推送到其中(这就是 $.getJSON 的返回值)。 Promise.all 结果起作用的原因是 Promise.all 等待那些 thenables 解决。

您很可能根本不想拥有全局的 userData。相反，让任何代码需要数据从 Promise.all 返回的 promise 的解析处理程序中获取数据。

但是如果你真的想填充userData，等待解析:

return Promise.all(userApiList.map($.getJSON))
    .then(results => {
        userData.push(...results);
        return results;
    });

请注意，在 ajax 请求完成之前，userData 不会有数据(当然)。

以上不会将结果添加到 userData，直到它们全部可用。您还可以选择随时填充它:

return Promise.all(userApiList.map(url => $.getJSON(url).then(result => {
        userData.push(result);
        return result;
    })));

但重要的是要记住，随着请求的完成，结果会随着时间的推移而不是瞬间添加。

如果您等待所有这些，Promise.all 将确保它们与您给予的 promise 的顺序相同；如果您边添加它们，它们的顺序可能就不一样(因为您在每个完成时都在插入，而较早的一个可能会在较晚的一个之后完成)。