当尝试将数据推送到我的数组中时，这不会保存数据

Question

我有这个代码：

let splatshArtData = [];
splatshArt.getSplatchArt(participants[i].championId).then((splatshArtUrl) => {
    splatshArtData.push(splatshArtUrl);                 
});
console.log(splatshArtData);

我想将“splatshArtUrl”添加到我的数组中，但这不起作用，当我尝试打印数据时，这不会打印任何内容，我不知道该怎么做，知道吗？

Answer 1

您在这里面临的问题是getSplatchArt 返回一个承诺，而承诺需要时间来解决。因此，您永远无法保证 splatshArtData.push(splatshArtUrl); 将在 console.log 之前运行。

解决方案是将所有需要从 Promise 返回数据的逻辑移到 Promise 回调中。这当然可以包括对其他函数的调用。

// function to process the splashArtData - will be called from the promise
// when the promise is resolved.
function processSplashArt(data) {
  // this will now print as you are expecting
  console.log(data);
}

let splatshArtData = [];

splatshArt.getSplatchArt(participants[i].championId).then((splatshArtUrl) => {
  splatshArtData.push(splatshArtUrl);    

  // pass the splashArtData to the callback function - it's now ready
  processSplashArt(slashArtData);         
});

Answer 2

JavaScript 是同步的，因此每一行代码都会一个接一个地执行。

如果我们用下面的行号注释您的代码

1. let splatshArtData = [];
2. splatshArt.getSplatchArt(participants[i].championId).then((splatshArtUrl) => {
3.     splatshArtData.push(splatshArtUrl);                 
   });
4. console.log(splatshArtData);

您假设它将按 1、2、3、4 的顺序运行，而实际上它会按 1、2、4、3 的顺序运行。这是为什么呢？因为 JavaScript 是同步的，而第 2 行的函数是异步的，这意味着您必须等待它才能继续。如果你不这样做，splatshArtData 变量将是一个空数组，因为尚未获取数据。

如果你想返回获取的数据并在另一个函数中使用它，你不应该像另一个答案中建议的那样混合它会回调，而是 chain 承诺并使用从获取数据的函数。

function getSplatshArt() {
    let splatshArtData = [];

    //Return a promise
    return splatshArt.getSplatchArt(participants[i].championId).then((splatshArtUrl) => {
        console.log(splatshArtData); //this will log out the data
        splatshArtData.push(splatshArtUrl);  
        return splatshArtData; //this will be the resolved value from the promise 
    });
}

//Call the function and access the resolved data in the .then() block
getSplatshArt()
    .then(data => {
        console.log(data); //this is the data returned from the getSplatshArt function
    });

查看您的代码，我的印象是您正在循环一个 ID 数组，如果您想一次获取多个值，这将无法正常工作，因为您必须处理多个 Promise。但这是另一个问题，我认为你应该在问这个问题之前自己做更多的研究。

Answer 3

试试这个：

let splatshArtData = [];
splatshArt.getSplatchArt(participants[i].championId).then((splatshArtUrl) => {
    splatshArtData.push(splatshArtUrl); 
    console.log(splatshArtData);                
});

then 中的函数在异步函数 getSplatchArt 解析它的承诺之后立即运行，因此它在将项目添加到数组之前运行 console.log。