gpt4 book ai didi

javascript - 在带有连接的 map 中使用异步等待

转载 作者:行者123 更新时间:2023-11-28 17:13:43 26 4
gpt4 key购买 nike

我正在使用 vanilla js 创建一个水疗中心,并且在使用 map 的 async-await 时遇到了问题。我的页面是这样的;

render: async () => {
let result = await getPostsList()
if (result.status == "success") {
let posts = result.data
let view = /*html*/`
<section class="section pageEntry">
<h1> Home </h1>

<div class="columns is-multiline" id="cards_container">
${await Promise.all(posts.map( (post) => Card.render(post)).join('\n ')) }
</div>
</section>
`
return view
} else {
console.log(result)
}

子组件是;

 render: async (post) => {
// console.log(post)
let view = /*html*/`
<div class="column is-half">
<article class="media">
<figure class="media-left">
<p class="image is-128x128">
<img src="https://bulma.io/images/placeholders/128x128.png">
</p>
</figure>
<div class="media-content">
<div class="content">
<p>
${post.title}
<strong>${post.author}</strong> <small>@johnsmith</small> <small>31m</small>
<br>
${post.content}
</p>
</div>
</div>
</article>
</div>
`
return view

我知道要将 async-await 与 map 一起使用,我应该使用 Promise.all。然而,这样做时,我的各个组件之间会出现逗号。 enter image description here

如果我使用 .join('') 删除逗号,那么它会给我一个完全奇怪的输出。如果我尝试在 map 中使用 async-await 加入,我会得到类似的内容

enter image description here

最佳答案

  await a().b()

等待 b 属性调用的结果。

 (await a()).b()

等待a,然后对结果调用b()。此外,您还可以直接在 Promise 数组上调用 join:

posts.map( (post) => Card.render(post)).join('\n ')

您想在等待的结果上调用它。总而言之:

 const rendered = await Promise.all(posts.map( (post) => Card.render(post));

return `... ${rendered.join("\n")} ...`

关于javascript - 在带有连接的 map 中使用异步等待,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53929818/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com