Question

我正在使用香草js创建水疗中心，而在地图上使用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

我知道要对地图使用异步等待，我应该使用Promise.all。但是，这样做时，我的各个组件之间却出现逗号。

如果我使用.join（''）删除逗号，那么它给了我一个完全奇怪的输出。如果我尝试在地图中加入异步等待，我会得到类似

的信息

Answer 1

  await a().b()

唤醒b属性调用的结果。

 (await a()).b()

唤醒a，然后对结果调用b()。另外，您直接在承诺数组上调用join：

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

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

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

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

在具有联接的地图中使用异步等待

1 个答案: