javascript - 带有 Promise.all 的 url 数组？

Question

我在使用 fetch 时遇到问题，我有一个包含 JSON 内容的 url 数组，我想从所有这些 JSON 中获取数据并将它们显示在 html 中。

使用 1 个 url 我得到我想要的结果:

fetch('myurl1')
.then(response => response.json())
.then(data => {
  let element = document.querySelector('.ele');
  element.innerHTML = `<p>${data.title}</p>`
})
.catch(err => console.log(err))

但是当我有几个 url 时我不知道该怎么做，我想显示它在所有这些 json 文件中的标题，怎么办？

Promise.all(urlsArray.map(url =>
  fetch(url)))
  .then(responses => {
    responses.forEach(response => {
      response.json();
      
      let element = document.querySelector('.ele');
      element.innerHTML = `<p>${?????.title}</p>`
    })
  })
  .catch(err => console.log(err))

这是我试过的方法，我不知道怎么做。

PS: .ele 是一个 div

Answer 1

收集所有结果，然后以您喜欢的任何 HTML 形式呈现它们，例如

Promise.all(urls.map(x => fetch(x))
  .then(async responses => {
    const results = await Promise.all(responses.map(x => x.json()));
    const html = results.map(x => `<li>${x.title}</li>`);
    let element = document.querySelector('.ele');
    element.innerHTML = `<ul>${html.join('')}</ul>`;
  })
  .catch(err => console.log(err))

这会导致:

<div class="ele">
  <li>Title A</li>
  <li>Title B</li>
  ...
</div>