异步等待提取

Question

我的获取与。然后，我想通过使用async和等待来提高档位。它应该等待所有5个API呼叫，然后放置答案，而是在每个API呼叫上显示答案

async function getPhotosFromAPI() {
  for (let i = 1; i <= 5; i++) {
    let albums = await fetch(
      `https://jsonplaceholder.typicode.com/photos/?albumId=${i}`
    );
    let result = await albums.json();
    let res = `<div class="album${i}"></div>`;
    document.querySelector(".display-images").innerHTML += res;
    for (let j = 1; j <= 5; j++) {
      document.querySelector(
        `.album${i}`
      ).innerHTML += `<img src="${result[j].url}"/>`;
    }
  }
  
  console.log(result);
}
async function showPhotos() {
  await getPhotosFromAPI();
  document.getElementById("#loader").style.display = "none";
}
showPhotos();

document.getElementById("img").style.display = "block";
for (let i = 1; i <= 5; i++) {
  fetch(`https://jsonplaceholder.typicode.com/photos/?albumId=${i}`)
    .then((response) => response.json())
    .then((json) => {
      document.getElementById("img").style.display = "none";

      const display = document.querySelector(".display-images");
      const albumNo = document.querySelector(".album-no");
      //   document.getElementById('img').style.display = "block";
      // document.getElementById('img').style.display = "none";]
      display.innerHTML += `<div class="album-${i}>`;
      for (let z = 1; z <= 5; z++) {
        display.innerHTML += `<img id="img" alt="pic-from-album${json[i].albumId}" src="${json[z].url}"/>`;
      }
      display.innerHTML += `<div>`;
    });
}

Answer 1

您应该使用一种同时提取的方式，例如承诺。

async function getPhotosFromAPI() {
  let albums = await Promise.all(
    Array(5).fill().map((elem, index) => 
      fetch(`https://jsonplaceholder.typicode.com/photos/?albumId=${index+1}`)
    )
  )
  let results = await Promise.all(
    albums.map(album => album.json())
  )
  console.log(results)
  return results
}

getPhotosFromAPI()

Answer 2

您是您要求代码等到每个fetch通过使用等待 on fetch的返回值（然后再次在返回值上， JSON）在您的循环中。因此，它将做到这一点：等到该请求完成，然后再进行下一个循环迭代。

如果您不想这样做，则需要一个接一个地启动每个Fetch，然后等待所有人完成。我可能只将其中一个用于一个功能，然后将其称为五次，建立返回的承诺的数组，然后等待Promise.all（/*....*/）< /code>那些承诺，沿着这些行：（

document.getElementById("img").style.display = "block";
// Fetch one item
const fetchOne = async (i) => {
    const response = await fetch(`https://jsonplaceholder.typicode.com/photos/?albumId=${i}`);
    if (!response.ok) {
        throw new Error(`HTTP error ${response.status}`);
    }
    const data = await response.json();
    document.getElementById("img").style.display = "none";

    const display = document.querySelector(".display-images");
    const albumNo = document.querySelector(".album-no");
    //   document.getElementById('img').style.display = "block";
    // document.getElementById('img').style.display = "none";]
    display.innerHTML += `<div class="album-${i}>`;
    for (let z = 1; z <= 5; z++) {
        display.innerHTML += `<img id="img" alt="pic-from-album${data[i].albumId}" src="${data[z].url}"/>`;
    }
    display.innerHTML += `<div>`;
};
// ...
await Promise.all(Array.from({length: 5}, (_, i) => fetchOne(i + 1)));
// All done

我以。 。 ]，它包含解析 JSON的结果。