Question

我需要提取大约五个URL（api）。我用网址做了一个数组。我需要进行一个for循环，以便可以将每个url信息放入不同的框中。我从获取网址开始，然后我想在页面上写下的每件事上都写下了+ info.name +等，但这需要花费很长时间，因此我需要使用for循环。我怎么做？因此，我不必提取和编写+ info +这么多次？

var urls = ["url i need to fetch",
"url i need to fetch",
"url i need to fetch",];

var url = "url i wanted to fetch";

fetch (url)
.then (result => result.json())
.then ((res) => {
console.log(res);
createCards (res);

})
.catch(err => console.log(err))

function createCards(card) {
var div = document.getElementById('card');



div.innerHTML = `


<h2>`+card.name+`</h2>
      <div>
      <b>HTML text </b>`+info.from.card+`</div>

Answer 1

您可以使用Promise.all（）同时运行所有请求：

const urls = [
  "url i need to fetch",
  "url i need to fetch",
  "url i need to fetch"
];
Promise
  .all( urls.map( url => fetch( url)))
  .then( responses => responses.map( response => response.json()))
  .then( results => {
    // do something with the results array
  })
  .catch( error => {
    // handle the error
  });

Answer 2

您可以使用for循环并使用let创建块级作用域

var urls = ["url1", "url2", "url3"];

for (let i = 0; i < urls.length; i++) {
  fetch(urls[i])
    .then(result => result.json())
    .then((res) => {
      console.log(res);
      createCards(res);
    })
    .catch(err => console.log(err))
}

function createCards(card) {
  var div = document.getElementById('card');
  div.innerHTML += `<h2>${card.name}</h2>
                  <div>
                  <b>HTML text </b>${someOtherText}</div>`
}

使用数组和for循环进行抓取

2 个答案: