使用 Promise 进行顺序渲染

Question

I have a view whereby I want to present 10 items by date sequentially. This data (the 10 items), is fetched from an API and is already sorted by date. A quick sample:

{
  "meta": { ... },
  "data": [
    {
      "id": 4891,
      "date": "February 23rd, 2021",
      "photo": "",
    },
    {
      "id": 3126,
      "date": "February 22nd, 2021",
      "photo": "",
    },
    {
      "id": 7895,
      "date": "February 21st, 2021",
      "photo": "123-sesame-st-bd088111.jpg",
    }
  ]
}

I have included a photo to help visualize. In some scenarios, such as the cards with the kittens, I have known photo assets from the initial data load. Scenarios where I do not have a known photo asset, such as the cards with the houses, I fetch those image assets from a secondary API call.

I am attempting to rely on promises to maintain the order when rendering these items to the view. Noting the dates at the bottom of each card, read left to right, this is not working. How can I maintain the rendered order of each item, as is returned from the initial data load?

Here's my current code with some things removed to better focus on the core logic:

ready(() => {

    const cards = document.getElementById("cards")

    function fetchPhoto(id) {
        return fetch(`https://api.com/photo/${id}`)
            .then((res) => { return res.json() })
            .then((res) => {
                return res.photo
            })
    }

    function renderCard(item, photo) {
        let postCard = document.createElement('div')
        postCard.innerHTML = `<div>...${photo}...</div>`
        return postCard
    }

    function createCard(item) {
        if (item.photo) {
            return new Promise((resolve, reject) => {
                resolve(renderCard(item, item.photo))
            });
        }
        return fetchPhoto(item.id).then(photo => {
            return renderCard(item, photo)
        });
    }

    function loadRecent() {
        fetch('https://api.com/items?limit=10')
            .then((res) => { return res.json() })
            .then((res) => {
                res.data.forEach(item => {
                    createCard(item).then(card => {
                        cards.appendChild(card)
                    })
                })
            })
    }

    loadRecent()

}

Answer 1

I have elected to take Thomas' advice, and render the cards first, then load images later.

ready(() => {

    const cards = document.getElementById("cards")

    function fetchPhoto(id) {
        fetch(`https://api.com/photo/${id}`)
            .then((res) => { return res.json() })
            .then((res) => {
                document.getElementById(`photo-${id}`).src = res.photo
            })
    }

    function renderCard(item, photo) {
        let postCard = document.createElement('div')
        postCard.innerHTML = `<div>...<img id="photo-${item.id}" src="${photo}"></img>...</div>`
        cards.appendChild(postCard)
        return true
    }

    function createCard(item) {
        let photo = 'https://via.placeholder.com/150x120';
        if (item.photo !== '') {
            photo = item.photo
        }
        return new Promise((resolve, reject) => {
            resolve(renderCard(item, photo))
        });
    }

    function loadRecent() {
        fetch('https://api.com/items?limit=10')
            .then((res) => { return res.json() })
            .then((res) => {
                res.data.forEach(item => {
                    createCard(item).then(() => {
                        if (item.photo == '') {
                            fetchPhoto(item.id)
                        }
                    })
                })
            })
    }

    loadRecent()

}