为什么这个代码:
for (i in posts) {
console.log(posts[i].pk)
fetch(`http://127.0.0.1:8000/api/blogs/${posts[i].pk}`)
.then((resp) => resp.json())
.then((data) => {
console.log(data)
var blogs = `
<div class = "center-div-row box-margin">
<div style="flex:2">
<h5>${data.title}</h5>
<hr>
</div>
<div style="flex:1">
<p>${data.body}</p>
</div>
<div style="flex:1">
<p>${data.created}</p>
</div>
<button class="edit-btn">Edit</button>
<button>Delete</button>
</div>
`
display.insertAdjacentHTML('beforeend', blogs)
})
}
给我不一致的api渲染。 数据以不同的顺序显示，并且完全不一致。 关于如何更好地执行fetch调用有什么建议吗？
fetch方法是异步的，这意味着您的代码在运行时将继续执行。 没有办法知道单个fetch调用将花费多长时间，而且它们并不都需要花费相同的时间。 因此，它们会在随机时间完成。
如果您按以下方式进行操作，您将以定义良好的顺序获得一个响应数组。
如果posts是一个对象（从您的代码中看不清楚）:
const pks = Object.values(posts).map(post => post.pk).sort()
const responses = await Promise.all(pks.map(pk =>
fetch(`http://127.0.0.1:8000/api/blogs/${pk}`)))
如果posts是数组:
const pks = posts.map(post => post.pk)
const responses = await Promise.all(pks.map(pk =>
fetch(`http://127.0.0.1:8000/api/blogs/${pk}`)))
由于代码使用await关键字，因此需要在标记为async的函数中运行。
