Javascript 图像不会在第一页呈现

我试图做一个简单的应用程序，调用api，每页呈现10幅图像。 第一页加载但不显示图像，但第二页显示图像

我做错了什么

let imageData = [];

fetch({api}
).then(res => res.json())
  .then((data) => {
    imageData.push(...data.results)
  })
fetch({api}
).then(res => res.json())
  .then((data) => {
    imageData.push(...data.results)
  })

let currentPage = 1;
let imagesPerPage = 10;

const changePage = (page)=> {

  let nextBttn = document.getElementById("nextBttn");
  let prevBttn = document.getElementById("prevBttn");
  let root = document.getElementById("root");
  let pageCount = document.getElementById("page");

  if (page < 1) page = 1;
  if (page > numPages()) page = numPages();

  root.innerHTML = "";

  for (var i = (page - 1) * imagesPerPage; i < (page * imagesPerPage) && i < imageData.length; i++) {
    const createImage = document.createElement('img')
    createImage.src = imageData[i].urls.thumb
    createImage.setAttribute('id',imageData[i].id)
     root.appendChild(createImage)
  }
  
  pageCount.innerHTML = page + "/" + numPages();

window.onload = ()=>{
     changePage(1);
};

让imageData=[]；
获取（{api}
).then（res=>res.json（））
。然后（（数据）=>{
imageData.push（…data.results）
})
获取（{api}
).then（res=>res.json（））
。然后（（数据）=>{
imageData.push（…data.results）
})
设currentPage=1；
设imagesPerPage=10；
常量更改页=（页）=>{
设nextbtn=document.getElementById（“nextbtn”）；
让prevBttn=document.getElementById（“prevBttn”）；
让root=document.getElementById（“root”）；
让pageCount=document.getElementById（“页面”）；
如果（第<1页）第=1页；
如果（page>numPages（））page=numPages（）；
root.innerHTML=“”；
对于（var i=（第1页）*imagesPerPage；i<（第*页imagesPerPage）和&i{
更改页面（1）；
};

---

有两次抓取，因为它返回30个图像，而我需要60个图像。问题是您有两个（技术上有三个）异步任务正在运行 它们相互依赖，但没有任何代码来同步备份

以下是事件的可能顺序：

您可以开始获取前30个图像

您可以开始获取第二个30个图像

无论这些请求的速度有多快，在解析/执行其余代码之前，它们的回调都不会启动

您为页面加载设置了回调

这就是事情可能变得不稳定的地方

场景A（不太可能，您不会有错误）： 服务器速度非常快（或缓存响应），并且已经有一个响应等待您。理论上，我相信在页面加载之前可能会触发fetch回调（尽管我可能在这里出错）。在这种不太可能的情况下，响应数据被加载到imageData中。然后页面加载事件触发，并调用changePage，它显示imageData中的图像

情景B（最有可能）： 服务器需要几毫秒的响应时间，但页面元素都已创建，因此首先触发onLoad回调。它尝试显示imageData（但还没有）。服务器最终以60个图像进行响应。不会执行任何代码来通知网页绘制此新图像数据

正如您所看到的，由于代码假定在页面加载（而非数据加载）上尝试显示某些图像时图像数据已经可用，因此当图像数据需要一段时间才能返回并且返回时不会通知页面显示新的图像数据时，代码将失败

以下是如何修改它：

let response1 = fetch({api})
  .then(res => res.json())
  .then((data) => {
    imageData.push(...data.results)
  });
let response2 = fetch({api})
  .then(res => res.json())
  .then((data) => {
    imageData.push(...data.results)
  });

Promise.all([response1, response2])
  .then(() => changePage(1));

// Remove onLoad callback because we don't really care when the page loads, we care when the data loads.