Javascript 包含Promise.all的URL数组？

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

使用1个url，我可以得到我想要的结果：

fetch（'myurl1'）
.then（response=>response.json（））
。然后（数据=>{
let元素=document.querySelector（'.ele'）；
element.innerHTML=`${data.title}
`
})
.catch（err=>console.log（err））

收集所有结果，然后以您喜欢的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))

Promise.all（url.map（x=>fetch（x））
。然后（异步响应=>{
const results=wait Promise.all（responses.map（x=>x.json（））；
const html=results.map（x=>`
${x.title}
`）；
let元素=document.querySelector（'.ele'）；
element.innerHTML=`
${html.join（“”）}
`；
})
.catch（err=>console.log（err））

这将导致：

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

标题A
标题B
...

我建议将所有URL放在一个数组中，然后逐个对它们进行验证，并轻松运行方法。这不能保证顺序，但可以肯定。别忘了处理错误

//这里定义我们的fetch函数只是一个例子
让fetch=（url）=>newpromise（res=>setTimeout（（）=>res（url+“已获取”），1000））
让URL=['url1'，'url2'，'url3']//数组中的所有URL
forEach（url=>{//用于数组中的每个url
fetch（url）//获取url
.then（data=>{//然后将它们附加到文档中
var节点=document.createElement（“LI”）；
var textnode=document.createTextNode（数据）；
node.appendChild（textnode）；
document.getElementsByTagName（“正文”）[0].appendChild（节点）
})
})

您可以执行与以前相同的操作，使用

响应上的
map
创建一个承诺数组，解析解析的json数据：

Promise.all（urlsArray.map（url=>fetch（url）））
。然后（回答=>{
返回Promise.all（responses.map（response=>response.json（））
})
。然后（数据数组=>{
dataArray.forEach（数据=>{
let元素=document.querySelector（'.ele'）；
element.innerHTML=`${data.title}
`
})
})
.catch（err=>console.log（err））
Avoid@Bergi它不会真正影响代码，
然后
返回一个承诺。这只是让代码更简洁，而不是引入额外的
，然后
通过将URL放入数组来实现forEach循环怎么样？@weegee不，
forEach
不是一个好主意。
map
做得更好。@weegee正如Bergi所说，
forEach
与IO绑定调用不能保证任何顺序，而首先收集数据然后进行处理可以实现更多的控制。这不能保证结果附加到DOM的任何顺序。此外，您应该始终处理承诺链末端的错误。