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

Question

我正在使用 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。然而，这样做时，我的各个组件之间会出现逗号。

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

Answer 1

  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")} ...`