Использование асинхронного ожидания на карте с объединением - PullRequest
Новая
       26

Использование асинхронного ожидания на карте с объединением

0 голосов
/ 26 декабря 2018

Я использую vanilla 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

Я понимаю, что для использования async-await с картой я должен использовать Promise.all.Однако при этом я получаю запятые между моими отдельными компонентами.enter image description here

Если я использую .join ('') для удаления запятых, то это дает мне совершенно странный вывод.Если я пытаюсь соединиться с async-await на картах, я получаю что-то вроде

enter image description here

1 Ответ

0 голосов
/ 26 декабря 2018 
  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")} ...`
...