Question

我在使用抓取时遇到问题，我有一个包含JSON内容的网址数组，我想从所有这些JSON中获取数据并以html显示。

使用1个网址，我得到想要的结果：

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

但是当我有几个网址时，我不知道该怎么办，我想显示所有这些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

您可以执行与之前相同的操作，在type User = { id: number; name: string }; const m = new ViewModel<User>({ id: 1, name: "Alice" }); m.foo(); // fine console.log(m.id); // also fine上使用map创建一个可解析为已解析的json数据的Promises数组：

responses

带Promise.all的网址数组？

3 个答案: