帶有 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>

Answer 2

我建議將您所有的 URL 放在一個數組中，然后對它們一個一個地執行 forEach 並輕松運行您的方法。 這不能保證訂單，但可以肯定。 不要忘記處理錯誤

 // define our fetch function here just for an example let fetch = (url) => new Promise(res => setTimeout(() => res(url + " is Fetched"),1000)) let urls = ['url1', 'url2', 'url3'] // all your urls in an array urls.forEach(url => { // for every url inside the array fetch(url) // fetch the url .then(data => { // then append them to the document var node = document.createElement("LI"); var textnode = document.createTextNode(data); node.appendChild(textnode); document.getElementsByTagName("body")[0].appendChild(node) }) })

Answer 3

您可以像以前一樣做同樣的事情，在responses上使用map來創建一個解析為解析的 json 數據的 Promise 數組：

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